w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
Home Media
Animated Stacked Slider with jQuery and Slick.js plugin

Animated Stacked Slider with jQuery and Slick.js plugin

W3TWEAKS by W3TWEAKS
September 30, 2019
in Media
0

Animated stacked slider is developed using css, html, jQuery and slick.js plugin. Demo and Download available.

You might also like

Animated Fullscreen and grid view Slider

Animated Fullscreen and grid view Slider

July 8, 2020
3.3k
Unicycle Range Slider

Unicycle Range Slider

July 7, 2020
3.3k

Demo Download

Author Camila Waz
Created NOVEMBER 11, 2018
License Open
Compatible browsers Chrome, Firefox, Safari

Dependencies

<link rel='stylesheet' href='http://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js'></script>

HTML Snippet

<div class="slider__wrapper">
  <div class="slider">
    <div class="slider__content">
      <div class="slider__text">
        <span>1</span>
        <h3>The Producers</h3>
        <p>The top apple producers around the world are China, United States, Turkey, Poland and Italy.</p>
      </div>
      <figure class="slider__image">
        <img src="https://images.unsplash.com/photo-1458011170811-0c83ce240f99?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8b4e45d40741267302ef75900c03b756&auto=format&fit=crop&w=800&q=90">
      </figure>
    </div>
    <div class="slider__content">
      <div class="slider__text">
        <span>2</span>
        <h3>The Size</h3>
        <p>Apple varieties range in size from a little larger than a cherry to as large as a grapefruit.</p>
      </div>
      <figure class="slider__image">
        <img src="https://images.unsplash.com/photo-1506277548624-5d9498cde122?ixlib=rb-0.3.5&s=9a53092137398e7219bbfc3acb936073&auto=format&fit=crop&w=800&q=90">
      </figure>
    </div>
    <div class="slider__content">
      <div class="slider__text">
        <span>3</span>
        <h3>The Time</h3>
        <p>Apple trees take four to five years to produce their first fruit.</p>
      </div>
      <figure class="slider__image">
        <img src="https://images.unsplash.com/photo-1503327655231-9a047d4772b6?ixlib=rb-0.3.5&s=4164f11f73a7f46defa0da9db7e76443&auto=format&fit=crop&w=800&q=90">
      </figure>
    </div>
    <div class="slider__content">
      <div class="slider__text">
        <span>4</span>
        <h3>The advantages</h3>
        <p>Apples contain no fat, sodium or cholesterol and are a good source of fiber.</p>
      </div>
      <figure class="slider__image">
        <img src="https://images.unsplash.com/photo-1513677785800-9df79ae4b10b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3bc74c728882a8c3d2ee704fc06e55f3&auto=format&fit=crop&w=800&q=90">
      </figure>
    </div>
    <div class="slider__content">
      <div class="slider__text">
        <span>5</span>
        <h3>The Surprise</h3>
        <p>Apples ripen six to 10 times faster at room temperature than if they are refrigerated.</p>
      </div>
      <figure class="slider__image">
        <img src="https://images.unsplash.com/photo-1506808541308-577f3be75bb7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5c86cf46bfb1e521d127021cf52d6187&auto=format&fit=crop&w=800&q=90">
      </figure>
    </div>
  </div>
</div>

CSS Code

body {
  font-family: Montserrat, sans-serif;
  margin: 0;
}

.slider__wrapper {
  margin: 0 auto;
}
.slider__wrapper .slick-track {
  overflow: hidden;
}

.slider__content {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  position: relative;
  max-height: 90%;
}
.slider__content .slider__text {
  opacity: 0;
  transition: all 1s ease;
  background: rgba(255, 255, 255, 0.75);
  padding: 2.5em 4em;
  position: absolute;
  left: 0;
  width: 40%;
  z-index: 1;
  opacity: 0;
  transition: all 1s linear;
}
.slider__content .slider__text span {
  font-weight: 600;
  font-size: 1.5em;
  background: linear-gradient(151deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
  border-radius: 50%;
  line-height: 35px;
  width: 35px;
  display: block;
  text-align: center;
  color: white;
}
.slider__content .slider__text h3 {
  font-weight: 600;
  font-size: 2em;
  display: inline-block;
  margin-bottom: 0;
}
.slider__content .slider__text h3:after {
  content: "";
  width: 100%;
  height: 3px;
  display: block;
  background: linear-gradient(151deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
}
.slider__content .slider__text p {
  line-height: 2;
}
.slider__content .slider__image {
  width: 70%;
  margin: 0;
  position: relative;
}
.slider__content .slider__image:before {
  content: "";
  padding-top: 56.25%;
  display: block;
}
.slider__content .slider__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  object-fit: cover;
  transition: all .75s ease;
}

.slick-arrow {
  position: absolute;
  bottom: 2em;
  right: 2em;
  z-index: 2;
  background: linear-gradient(151deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
  background-size: 100%;
  border: 0;
  width: 30px;
  height: 25px;
  text-indent: -9999px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  cursor: pointer;
  transition: all .5s ease;
}
.slick-arrow:hover {
  background-size: 190%;
}
.slick-arrow.slick-prev {
  right: 5em;
  transform: rotate(-90deg);
}
.slick-arrow.slick-next {
  transform: rotate(90deg);
}

.slick-active .slider__text {
  opacity: 1;
}
.slick-active .slider__image img {
  width: 100%;
}

JavaScript

$('.slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  fade: true,
});

Preview

Animated Stacked Slider with jQuery and Slick.js plugin 1

Tags: animatedanimationCarouselCSScss animationhtmljquerymediapluginslicksliderslidersslideshowsstackedstacked sliders
Previous Post

CSS buttons styled to look like shirt buttons

Next Post

Colorful Flat Loading Icon

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

Animated Fullscreen and grid view Slider

Animated Fullscreen and grid view Slider

by W3TWEAKS
July 8, 2020
0
3.3k

Animated Fullscreen Slider developed using HTML, JavaScript, and CSS. This is a fullscreen slider that has next, previous, and grid...

Unicycle Range Slider

Unicycle Range Slider

by W3TWEAKS
July 7, 2020
0
3.3k

Unicycle Range Slider developed using HTML, JavaScript and CSS. A range input where a stick figure is on a unicycle...

CSS Sliders

15 CSS Sliders

by W3TWEAKS
June 27, 2020
0
3.3k

CSS sliders are Hand-picked free collections and developed using HTML, CSS and JavaScript. 3D Cube Carousel 3D Cube Carousel developed...

10 CSS Logo Designs

10 CSS Logo Designs

by W3TWEAKS
May 11, 2020
0
3.3k

Pure hand-picked HTML and CSS logo design collections. Demo and Downloads are available.  CSS Hexagonal Logo Demo Image: CSS Hexagonal Logo Demo...

Next Post
Colorful Flat Loading Icon

Colorful Flat Loading Icon

Discussion about this post

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube

Welcome Back!

Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In