Infinite AutoScroll Slider For Wordpress & Blogger

Hello! Welcome to Tecky AaryaN. 

You are looking for Infinite AutoScroll Slider For Wordpress & Blogger then this post is just for you.

You can see the demo here⤵

   View Demo

Infinite AutoScroll Slider

Step 1: Go to Blogger Dashboard.

Step 2: On Blogger Dashboard, click Layout.

Step 3: Select HTML/JAVASCRIPT & Set in Our Theme According.

<style>.sliderCont{align-items:center;background:#E3E3E3;display:flex;height:100px;justify-content:center}@-webkit-keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(calc(-250px * 7))}}@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(calc(-250px * 7))}}.slider{background:white;box-shadow:0 10px 20px -5px rgba(0,0,0,0.125);height:100px;margin:auto;overflow:hidden;position:relative;width:960px}.slider::before,.slider::after{content:"";height:100px;position:absolute;width:200px;z-index:2}.slider::after{right:0;top:0;transform:rotateZ(180deg)}.slider::before{left:0;top:0}.slider .slide-track{-webkit-animation:scroll 30s linear infinite;animation:scroll 30s linear infinite;display:flex;width:calc(250px * 14)}.slider .slide{height:100px;width:250px}</style>
  
  <div class="sliderCont">

    <div class="slider">

      <div class="slide-track">

        <div class="slide">

          <img alt="" height="100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" width="250" />

        </div>

        <div class="slide">

          <img alt="" height="100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" width="250" />

        </div>

        <div class="slide">

          <img alt="" height="100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" width="250" />

        </div>

        <div class="slide">

          <img alt="" height="100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" width="250" />

        </div>

        <div class="slide">

          <img alt="" height="100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" width="250" />

        </div>

        <div class="slide">

          <img alt="" height="100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" width="250" />

        </div>

        <div class="slide">

          <img alt="" height="100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" width="250" />

        </div>

        <div class="slide">

          <img alt="" height="100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" width="250" />

        </div>

        <div class="slide">

          <img alt="" height="100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" width="250" />

        </div>

        <div class="slide">

          <img alt="" height="100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" width="250" />

        </div>

        <div class="slide">

          <img alt="" height="100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" width="250" />

        </div>

        <div class="slide">

          <img alt="" height="100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" width="250" />

        </div>

        <div class="slide">

          <img alt="" height="100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" width="250" />

        </div>

        <div class="slide">

          <img alt="" height="100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" width="250" />

        </div>

      </div>

    </div>

  </div>

Step 4: Now Click on Save Button.

Conclusion

I hope you have successfully added your Slider. If you are facing any problem in any section or you have any question then ask us in the comment box. 

Copyright: 

Tecky AaryaN

Go to Link

Prev And Next