jQuery Responsive Carousel with Image Overlay

jQuery Responsive Carousel With Image Overlay
Project: Full Page Slider
Author: Joseph Martucci
Edit Online: View on CodePen
License: MIT

Yet another jQuery plugin to create a responsive image carousel with text overlay. The slider comes with the next and previous arrows navigation. The arrows use Font Awesome icons to navigate between different slides or images in the slider.

The slider also includes a div element with a class of “slide-box”, which contains multiple div elements with a class of “slide”. Each of these div elements contains a background image specified by the “background-image” CSS property, which points to different images.

The div elements with the “slide” class are intended to represent the different slides in the slider. The div element with the “slide-content” class contains an h1 element and a p element that may be used to provide a caption or additional information about the slide content. Overall, this HTML code can be used to create a simple and customizable image slider component for a webpage.

How to Create Jquery Responsive Carousel With Image Overlay

First of all, load the Modernizr JS, Normalize CSS and Font Awesome CSS by adding the following CDN links into the head tag of your HTML document.

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Create the HTML structure for image carousel as follows:

 <div class="slider">
    <div class="slider-control slide-left"><i class="fa fa-minus fa-2x"></i></div>
  <div class="slider-control slide-right"><i class="fa fa-plus fa-2x"></i></div>
    <div class="slide-box">
      <div class="slide" style="background-image: url(https://images.unsplash.com/photo-1427435150519-42d9bcd0aa81?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1896a40b338ccfb0d8ff7e5199e5ecd2)">
        <div class="slide-content">
          <H1>A Full Page Slider</H1>
          <p>With a flex-box container inside it.</p>
        </div>
      </div>
      
      <div class="slide" style="background-image: url(https://images.unsplash.com/photo-1452800185063-6db5e12b8e2e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=2700f9770386e4c5ebc53502a9099966)">
      </div>
      
      <div class="slide" style="background-image: url(https://images.unsplash.com/photo-1452274381522-521513015433?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=476b9724fcf47b51c652d66e384f9ba0)">
      </div>
    </div>
</div>

Style the carousel using the following CSS styles:

@import url(https://fonts.googleapis.com/css?family=Lato:100,900);
html, body {
  height: 100%;
  font-family: "Lato", sans-serif;
  font-weight: 100;
}

h1, h2, h3, h4 {
  font-weight: 900;
}

.slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.slider .slider-control {
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  width: 48px;
  height: 48px;
  position: absolute;
  top: 50%;
  margin-top: -24px;
  z-index: 1;
  border-radius: 50%;
  background: #FFF;
  opacity: 0.8;
  cursor: pointer;
  line-height: 48px;
  text-align: center;
}
.slider .slider-control:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  background: #222;
}
.slider .slider-control.slide-left {
  left: 24px;
}
.slider .slider-control.slide-right {
  right: 24px;
}
.slider .slider-control i {
  color: #ccc;
  line-height: 48px;
}
.slider .slide-box {
  -webkit-transition: all 0.8s ease-out;
  -moz-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
  height: 100%;
  width: 999999px;
}
.slider .slide-box img {
  width: 100%;
}
.slider .slide-box .slide {
  -webkit-transition: all 0.8s ease-out;
  -moz-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
  background-size: cover;
  background-position: center center;
  float: left;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20000px #000;
  z-index: 10;
}
.slider .slide-box .slide .slide-content {
  height: 40%;
  font-size: 22px;
  min-height: 200px;
  width: 40%;
  min-width: 300px;
  color: #FFF;
  background: rgba(51, 77, 153, 0.5);
  text-align: center;
}

Now, load the jQuery by adding the following CDN link before closing the body tag:

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Finally, add the following JavaScript function to initialize the image carousel.

var $slider = $('.slider');
  var $slideBox = $slider.find('.slide-box');
  var $leftControl = $slider.find('.slide-left');
  var $rightControl = $slider.find('.slide-right');
  var $slides = $slider.find('.slide');
  var numItems = $slider.find('.slide').length;
  var position = 0;


  var windowWidth = $(window).width();
  $slides.width(windowWidth);
  $leftControl.on('click', function(){
    var width = $slider.width();
    position = position - 1 >= 0 ? position - 1 : numItems - 1;
    if(position != numItems-1){
      $slider.find('.slide').eq(position + 1).css('margin-left', 0);
    }
    else{
      $slider.find('.slide:gt(0)').each(function(index){
        $(this).css('margin-left', width * -1 + 'px');
      });
    }
  });

  $rightControl.on('click', function(){
    var width = $slider.width();
    position = position + 1 < numItems ? position + 1 : 0;
    if(position != 0){
      $slider.find('.slide').eq(position).css('margin-left',  width * -1 + 'px');
    }
    else{
      $slider.find('.slide').css('margin-left', 0);
    }
  });

  $(window).resize(function(){
   $slides.width($(window).width()).height($(window).height);
  });

That’s all! hopefully, you have successfully created a responsive carousel with image overlay using jQuery. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply