Infinite Autoplay Slider

in Tutorials on 12 Jul 2020

sell  smf  html  css  slider  photoshop


Infinite Autoplay Slider
Let's create a very simple Slider; useful if ya want to display 'friends' that support you or even companies that you have done work for or whatever the case may be. It is very easy to accomplish and easy to use; you would need Photoshop or other to create your own images.


The CSS:
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}
.slider-block {
  background: transparent;
  /*box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);*/
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.slider-block::before, .slider-block::after {
  background: linear-gradient(to right, #F9FCFE 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.slider-block::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slider-block::before {
  left: 0;
  top: 0;
}
.slider-block .slide-track {
  animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}
.slider-block .slide-block {
  height: 100px;
  width: 250px;
}

I commented out box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125); If you want to be creative, add a background color ie: #123456; and/or un-comment the box-shadow if you like.

.slider-block {
  background: transparent;
  /*box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);*/
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}

Replace the color; #F9FCFE to match the color of the body of your theme.

.slider-block::before, .slider-block::after {
  background: linear-gradient(to right, #F9FCFE 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}


The HTML:
<div class="slider-block">
    <div class="slide-track">
        <div class="slide-block">
            <img src="https://www.#.com/images/a.png" height="100" width="250" alt="" />
        </div>
        <div class="slide-block">
            <img src="https://www.#.com/images/b.png" height="100" width="250" alt="" />
        </div>
        <div class="slide-block">
            <img src="https://www.#.com/images/c.png" height="100" width="250" alt="" />
        </div>
        <div class="slide-block">
            <img src="https://www.#.com/images/d.png" height="100" width="250" alt="" />
        </div>
        <div class="slide-block">
            <img src="https://www.#.com/images/e.png" height="100" width="250" alt="" />
        </div>
        <div class="slide-block">
            <img src="https://www.#.com/images/f.png" height="100" width="250" alt="" />
        </div>
        <div class="slide-block">
            <img src="https://www.#.com/images/g.png" height="100" width="250" alt="" />
        </div>
        <div class="slide-block">
            <img src="https://www.#.com/images/a.png" height="100" width="250" alt="" />
        </div>
        <div class="slide-block">
            <img src="https://www.#.com/images/b.png" height="100" width="250" alt="" />
        </div>
        <div class="slide-block">
            <img src="https://www.#.com/images/c.png" height="100" width="250" alt="" />
        </div>
        <div class="slide-block">
            <img src="https://www.#.com/images/d.png" height="100" width="250" alt="" />
        </div>
        <div class="slide-block">
            <img src="https://www.#.com/images/e.png" height="100" width="250" alt="" />
        </div>
        <div class="slide-block">
            <img src="https://www.#.com/images/f.png" height="100" width="250" alt="" />
        </div>
        <div class="slide-block">
            <img src="https://www.#.com/images/g.png" height="100" width="250" alt="" />
        </div>
    </div>
</div>

That's it, happy coding!

Image credit: https://unsplash.com/



idesignSMF Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF.com and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.

idesignSMF.com | SimpleMachines.org



0 Comments


local_fire_department You might also like


rocket_launch

Find the right theme for you. Browse through our gallery of expertly-crafted free SMF themes to find the perfect one for your needs.