jQuery Plugins › jQuery Slider Plugins ›

Minimal Responsive Slider/Carousel With jQuery And CSS3

File Size: 9.29 KB
Views Total: 5339
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE9+, FireFox, Opera, Safari#Carousel
Minimal Responsive Slider/Carousel With jQuery And CSS3

This is a minimal, clean, responsive carousel/slider for your web applications, written in JavaScript (jQuery ) and CSS3.

Features auto play, infinite loop, background image, image caption, slider controls, responsive layout (based on CSS flexbox) and smooth transition effect (based on CSS3 animations).

How to use it:

1. Add images, captions, controls to the carousel slider following the markup structure like these:

<div class="slide-window">
  <div class="slide-wrapper" style="width: 300%;">
    <div class="slide">
      <a href="#">
        <div class="slide-image" style="background-image: url(1.jpg)">
        </div>
        <div class="slide-caption">
          <h2>Slide 1</h2>
          <p>Slide 1 Caption</p>
        </div>
      </a>
    </div>
    <div class="slide">
      <a href="#">
        <div class="slide-image" style="background-image: url(2.jpg)">
        </div>
        <div class="slide-caption">
          <h2>Slide 2</h2>
          <p>Slide 2 Caption</p>
        </div>
      </a>
    </div>
    <div class="slide">
      <a href="#">
        <div class="slide-image" style="background-image: url(3.jpg)">
        </div>
        <div class="slide-caption">
          <h2>Slide 3</h2>
          <p>Slide 3 Caption</p>
        </div>
      </a>
    </div>
  </div>
  <div class="slide-controller">
    <div class="slide-control-left">
      <div class="slide-control-line"></div>
      <div class="slide-control-line"></div>
    </div>
    <div class="slide-control-right">
      <div class="slide-control-line"></div>
      <div class="slide-control-line"></div>
    </div>
  </div>
</div>

2. Load the main JavaScript after jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="js/script.js"></script>

3. The primary CSS for the carousel slider.

.slide-window {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.slide-window .slide-wrapper {
  position: relative;
  left: 0;
  display: flex;
  -webkit-transition: right 0.5s;
  transition: right 0.5s;
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
}

.slide-window .slide-wrapper .slide {
  position: relative;
  width: 100%;
}

.slide-window .slide-wrapper .slide:before {
  content: "";
  display: block;
  padding-top: 41.17%;
}

.slide-window .slide-wrapper .slide .slide-image {
  background-size: cover;
  background-position: 50% 50%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.slide-window .slide-wrapper .slide .slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #fff;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.7));
}

.slide-window .slide-wrapper .slide .slide-caption h2 {
  margin: 2rem 4.5rem;
  font-size: 2rem;
}

.slide-window .slide-wrapper .slide .slide-caption p {
  margin: -1rem 4.5rem 3rem;
  font-size: 1.5rem;
}

@media screen and (max-width: 767px) {

.slide-window .slide-wrapper .slide .slide-caption h2 {
  margin: 0 3rem 1.5rem;
  font-size: 1.2rem;
}

.slide-window .slide-wrapper .slide .slide-caption p { margin: -1rem 3rem 1.75rem;  font-size: .8rem;
}
}

4. The needed CSS for the controls (navigation arrows and pagination bullets).

.slide-window:hover .slide-control-left {
  left: 1%;
  opacity: 1;
}

.slide-window:hover .slide-control-right {
  right: 1%;
  opacity: 1;
}

.slide-control-left {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  left: 10%;
  right: auto;
}

.slide-control-left .slide-control-line {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 14px;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  left: 12px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.slide-control-left .slide-control-line:nth-child(2) {
  -webkit-transform: translateY(1px) rotate(-135deg);
  transform: translateY(1px) rotate(-135deg);
}

.slide-control-left .slide-control-line:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

.slide-control-left:hover { background-color: #fff; }

.slide-control-left:hover .slide-control-line:after { background-color: #aaa; }

.slide-control-left .rotate-left-top:after { animation: arrowLineRotation 0.49s; }

.slide-control-left .rotate-left-down:after { animation: arrowLineRotationRev 0.49s; }

@media screen and (max-width: 767px) {

.slide-control-left {
  height: 30px;
  width: 30px;
  opacity: 1;
}

.slide-control-left .slide-control-line {
  left: 9px;
  height: 10px;
}
}

@media screen and (max-width: 1023px) {

.slide-control-left {
  opacity: 1;
  left: 1%;
}
}

.slide-control-right {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  right: 10%;
  left: auto;
}

.slide-control-right .slide-control-line {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 14px;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  right: 12px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.slide-control-right .slide-control-line:nth-child(2) {
  -webkit-transform: translateY(1px) rotate(135deg);
  transform: translateY(1px) rotate(135deg);
}

.slide-control-right .slide-control-line:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

.slide-control-right:hover { background-color: #fff; }

.slide-control-right:hover .slide-control-line:after { background-color: #aaa; }

.slide-control-right .rotate-right-down:after { animation: arrowLineRotation 0.49s; }

.slide-control-right .rotate-right-top:after { animation: arrowLineRotationRev 0.49s; }

@media screen and (max-width: 767px) {

.slide-control-right {
  height: 30px;
  width: 30px;
  opacity: 1;
}

.slide-control-right .slide-control-line {
  right: 9px;
  height: 10px;
}
}

@media screen and (max-width: 1023px) {

.slide-control-right {
  opacity: 1;
  right: 1%;
}
}

@keyframes 
arrowLineRotation {  to {
 transform: rotate(180deg);
}
}

@keyframes 
arrowLineRotationRev {  to {
 transform: rotate(-180deg);
}
}

.slide-control-btn ul {
  position: absolute;
  padding: 0;
  bottom: 0px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.slide-control-btn ul li {
  margin: 0 5px;
  list-style: none;
}

.slide-control-btn ul li a {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.slide-control-btn ul li a.active, .slide-control-btn ul li a:hover { background-color: #fff; }

@media screen and (max-width: 767px) {

.slide-control-btn ul {  margin: .5rem 0;
}

.slide-control-btn ul li a {
  width: 10px;
  height: 10px;
}
}

This awesome jQuery plugin is developed by hodanov. For more Advanced Usages, please check the demo page or visit the official website.