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.

demo

The CSS:

Code Select Expand

@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.

Code Select Expand

.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.

Code Select Expand

.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:

Code Select Expand

<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/

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.

demo

The CSS:

Code Select Expand

@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.

Code Select Expand

.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.

Code Select Expand

.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:

Code Select Expand

<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/

jQuery Slider

AlloyUI Slider