Infinite AutoScroll Slider For Wordpress & Blogger - Vivek GYAN 7.0

 Hello! Welcome to Vivek GYAN 7.0  

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:  ©️ Vivek GYAN 7.0