Home Web Development JavaScript jQuery Hover Carousel Slider With CSS | Slides With Mouse Direction

jQuery Hover Carousel Slider With CSS | Slides With Mouse Direction

October 9, 2019

7752

How we can create a carousel slider which slides on hover? Solution: See this jQuery Hover Carousel Slider With CSS, Slider Move According to Mouse Direction.

Previously I have shared many types of carousels, but this different because image slides according to hover direction. Basically, hover carousel slider contains multiple images in a single line after that hides overflow and creates a vertical scroll to see all images. In mobile phones, users can swipe left or right to see all the images.

Today you will learn to create Carousel which Moves According to Mouse Direction. This program has a lot of image in line-wise inside a rectangular box, and here is a horizontal scroll bar for slides and seeing all the images. The main fact of this program is it slides on mouseover/hover. Suppose you move the mouse’s pointer left to right, then the images will slide left to right and you will see hidden images.

So, Today I am sharing jQuery Hover Carousel Slider With CSS. Here I have used jQuery for creating the hover function otherwise, if we use pure JavaScript it will be very difficult. As we know jQuery is a JS library, that’s why I am putting this post in JavaScript category. I think this post will useful for you, and we can use this as a portfolio overview or any other section.

If you are thinking now how this carousel slide actually is, then see the preview given below.

Preview Of Images Slides With Mouse Direction

See this video preview to getting an idea about how this carousel slider looks like.

Live Demo

Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.

jQuery Hover Carousel Slider With CSS Source Code

Before sharing source code, let’s talk about it. First I have created 3 divs and a big image list inside the div using HTML <ul> & <li> tags. And insert all the images using HTML <img scr="#"> tag, and also linked external files in the HTML file. Thats are the fews works I have done with HTML.

Now using CSS I have placed all the elements on the right place, as you can see in the preview. Here I have put overflow’s value auto and overflow scrolling touch for creating the scrollable element (info). For creating the next and previous icons I have used Unicode icons and placed using CSS content command. And many more basic things I have done in the CSS file.

With jQuery I have created the scroll to move feature, here I have used if statement a lot. Actually, jQuery’s codes can’t be explain for this program, you will understand after getting the codes. For creating this program you have to create 3 files for that. First for HTML, second for CSS, and the Third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Hover Carousel Slider | Webdevtrick.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>

  
<div class="carousel right">
  <div class="slide"></div>
  <div class="wrap">
    <ul>
      <li><img src="https://webdevtrick.com/wp-content/uploads/sunset-background.jpg"/></li>
      <li><img src="https://webdevtrick.com/wp-content/uploads/coding.jpg"/></li>
      <li><img src="https://webdevtrick.com/wp-content/uploads/1st.jpg"/></li>
      <li><img src="https://webdevtrick.com/wp-content/uploads/login-page-image.jpg"/></li>
      <li><img src="https://webdevtrick.com/wp-content/uploads/1.jpg"/></li>
      <li><img src="https://webdevtrick.com/wp-content/uploads/b47sample2.jpg"/></li>
      <li><img src="https://webdevtrick.com/wp-content/uploads/image-slider1.jpg"/></li>
      <li><img src="https://webdevtrick.com/wp-content/uploads/black-background.jpg"/></li>
      <li><img src="https://webdevtrick.com/wp-content/uploads/sunset-background.jpg"/></li>
      <li><img src="https://webdevtrick.com/wp-content/uploads/coding.jpg"/></li>
      <li><img src="https://webdevtrick.com/wp-content/uploads/1st.jpg"/></li>
      <li><img src="https://webdevtrick.com/wp-content/uploads/login-page-image.jpg"/></li>

    </ul>
  </div>
</div>

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

</body>
</html>

<!DOCTYPE html>

<head>

<title>Hover Carousel Slider | Webdevtrick.com</title>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
body {
  background: #212121;
}
.carousel {
  display: block;
  position: absolute;
  -webkit-transform: translateZ(0);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  height: 200px;
  min-width: 550px;
  margin: auto;
  font-size: 0;
  background: #505456;
  padding: 8px;
  border-radius: 6px;
  box-shadow: 0 4px 10px #000;
  height: 200px;
  -webkit-overflow-scrolling: touch;
}
.touch .carousel {
  overflow: auto;
}
.carousel:before, .carousel:after {
  content: '';
  opacity: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 50px;
  font-size: 80px;
  line-height: 190px;
  font-family: arial;
  color: #2ab1ce;
  font-weight: bold;
  pointer-events: none;
  transition: 0.2s ease-out;
}
.carousel:before {
  content: '\2039';
  left: 0;
  text-align: left;
  text-indent: -20px;
  box-shadow: 50px 0 20px -20px #292B2C inset;
}
.carousel:after {
  content: '\203A';
  right: 0;
  text-align: right;
  text-indent: 40px;
  box-shadow: -50px 0 20px -20px #292B2C inset;
}
.carousel.right:after, .carousel.left:before {
  opacity: 1;
}
.carousel.right:after {
  right: 0;
  text-indent: 60px;
}
.carousel.left:before {
  left: 0;
  text-indent: -40px;
}
.carousel > a {
  position: absolute;
  margin: 0;
  top: 0;
  bottom: 0;
  color: #CCC;
  font-size: 1.5em;
  transition: 0.1s;
}
.carousel > a:hover {
  color: #FFF;
}
.carousel > a.prev {
  left: -20px;
}
.carousel > a.next {
  right: -20px;
}
.carousel > .slide {
  pointer-events: none;
  position: absolute;
  z-index: 4;
  bottom: 0;
  left: 0;
  background: #2ab1ce;
  height: 4px;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.2s, bottom 0.2s;
}
.carousel:hover > .slide {
  opacity: 1;
  bottom: -10px;
}
.carousel > .wrap {
  overflow: hidden;
  border-radius: 5px;
}
.carousel > .wrap > ul {
  list-style: none;
  white-space: nowrap;
  height: 200px;
}
.carousel > .wrap > ul > li {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  margin: 0 0 0 5px;
  position: relative;
  overflow: hidden;
  transition: 0.25s ease-out;
}
.carousel > .wrap > ul > li:first-child {
  margin: 0;
}
.carousel > .wrap > ul > li > img {
  display: block;
  height: 100%;
  margin: auto;
  vertical-align: bottom;
  position: relative;
  z-index: 1;
  transition: 1s ease;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

/* Code By Webdevtrick ( https://webdevtrick.com ) */

body {

background: #212121;

}

.carousel {

display: block;

position: absolute;

-webkit-transform: translateZ(0);

top: 0;

right: 0;

bottom: 0;

left: 0;

width: 55%;

height: 200px;

min-width: 550px;

margin: auto;

font-size: 0;

background: #505456;

padding: 8px;

border-radius: 6px;

box-shadow: 0 4px 10px #000;

height: 200px;

-webkit-overflow-scrolling: touch;

}

.touch .carousel {

overflow: auto;

}

.carousel:before, .carousel:after {

content: '';

opacity: 0;

position: absolute;

top: 0;

bottom: 0;

z-index: 2;

width: 50px;

font-size: 80px;

line-height: 190px;

font-family: arial;

color: #2ab1ce;

font-weight: bold;

pointer-events: none;

transition: 0.2s ease-out;

}

.carousel:before {

content: '\2039';

left: 0;

text-align: left;

text-indent: -20px;

box-shadow: 50px 0 20px -20px #292B2C inset;

}

.carousel:after {

content: '\203A';

right: 0;

text-align: right;

text-indent: 40px;

box-shadow: -50px 0 20px -20px #292B2C inset;

}

.carousel.right:after, .carousel.left:before {

opacity: 1;

}

.carousel.right:after {

right: 0;

text-indent: 60px;

}

.carousel.left:before {

left: 0;

text-indent: -40px;

}

.carousel > a {

position: absolute;

margin: 0;

top: 0;

bottom: 0;

color: #CCC;

font-size: 1.5em;

transition: 0.1s;

}

.carousel > a:hover {

color: #FFF;

}

.carousel > a.prev {

left: -20px;

}

.carousel > a.next {

right: -20px;

}

.carousel > .slide {

pointer-events: none;

position: absolute;

z-index: 4;

bottom: 0;

left: 0;

background: #2ab1ce;

height: 4px;

border-radius: 10px;

opacity: 0;

transition: opacity 0.2s, bottom 0.2s;

}

.carousel:hover > .slide {

opacity: 1;

bottom: -10px;

}

.carousel > .wrap {

overflow: hidden;

border-radius: 5px;

}

.carousel > .wrap > ul {

list-style: none;

white-space: nowrap;

height: 200px;

}

.carousel > .wrap > ul > li {

display: inline-block;

vertical-align: middle;

height: 100%;

margin: 0 0 0 5px;

position: relative;

overflow: hidden;

transition: 0.25s ease-out;

}

.carousel > .wrap > ul > li:first-child {

margin: 0;

}

.carousel > .wrap > ul > li > img {

display: block;

height: 100%;

margin: auto;

vertical-align: bottom;

position: relative;

z-index: 1;

transition: 1s ease;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
;(function($){
    "use strict";

    var bindToClass      = 'carousel',
        containerWidth   = 0,
        scrollWidth      = 0,
        posFromLeft      = 0,    
        stripePos        = 0,   
        animated         = null,
        $slide, $carousel, el, $el, ratio, scrollPos, nextMore, prevMore, pos, padding;

    function calc(e){
        $el = $(this).find(' > .wrap');
        el  = $el[0];
        $carousel = $el.parent();
        $slide = $el.prev('.slide');

        nextMore = prevMore  = false; 

        containerWidth       = el.clientWidth;
        scrollWidth          = el.scrollWidth; 
        padding              = 0.2 * containerWidth; 
        posFromLeft          = $el.offset().left;
        stripePos            = e.pageX - padding - posFromLeft;
        pos                  = stripePos / (containerWidth - padding*2);
        scrollPos            = (scrollWidth - containerWidth ) * pos;
        
        if( scrollPos < 0 )
          scrollPos = 0;
        if( scrollPos > (scrollWidth - containerWidth) )
          scrollPos = scrollWidth - containerWidth;
      
        $el.animate({scrollLeft:scrollPos}, 200, 'swing');
        
        if( $slide.length )
            $slide.css({
                width: (containerWidth / scrollWidth) * 100 + '%',
                left: (scrollPos / scrollWidth ) * 100 + '%'
            });

        clearTimeout(animated);
        animated = setTimeout(function(){
            animated = null;
        }, 200);

        return this;
    }

    function move(e){
        if( animated ) return;

        ratio     = scrollWidth / containerWidth;
        stripePos = e.pageX - padding - posFromLeft; 

        if( stripePos < 0)
            stripePos = 0;

        pos = stripePos / (containerWidth - padding*2); 

        scrollPos = (scrollWidth - containerWidth ) * pos;   

        el.scrollLeft = scrollPos;
        if( $slide[0] && scrollPos < (scrollWidth - containerWidth) )
          $slide[0].style.left = (scrollPos / scrollWidth ) * 100 + '%';

        prevMore = el.scrollLeft > 0;
        nextMore = el.scrollLeft < (scrollWidth - containerWidth);

        $carousel.toggleClass('left', prevMore);
        $carousel.toggleClass('right', nextMore);
    }

    $.fn.carousel = function(options){
        $(document)
            .on('mouseenter.carousel', '.' + bindToClass, calc)
            .on('mousemove.carousel', '.' + bindToClass, move);
    };

    $.fn.carousel();

})(jQuery);

// Code By Webdevtrick ( https://webdevtrick.com )

;(function($){

"use strict";

var bindToClass = 'carousel',

containerWidth = 0,

scrollWidth = 0,

posFromLeft = 0,

stripePos = 0,

animated = null,

$slide, $carousel, el, $el, ratio, scrollPos, nextMore, prevMore, pos, padding;

function calc(e){

$el = $(this).find(' > .wrap');

el = $el[0];

$carousel = $el.parent();

$slide = $el.prev('.slide');

nextMore = prevMore = false;

containerWidth = el.clientWidth;

scrollWidth = el.scrollWidth;

padding = 0.2 * containerWidth;

posFromLeft = $el.offset().left;

stripePos = e.pageX - padding - posFromLeft;

pos = stripePos / (containerWidth - padding*2);

scrollPos = (scrollWidth - containerWidth ) * pos;

if( scrollPos < 0 )

scrollPos = 0;

if( scrollPos > (scrollWidth - containerWidth) )

scrollPos = scrollWidth - containerWidth;

$el.animate({scrollLeft:scrollPos}, 200, 'swing');

if( $slide.length )

$slide.css({

width: (containerWidth / scrollWidth) * 100 + '%',

left: (scrollPos / scrollWidth ) * 100 + '%'

});

clearTimeout(animated);

animated = setTimeout(function(){

animated = null;

}, 200);

return this;

}

function move(e){

if( animated ) return;

ratio = scrollWidth / containerWidth;

stripePos = e.pageX - padding - posFromLeft;

if( stripePos < 0)

stripePos = 0;

pos = stripePos / (containerWidth - padding*2);

scrollPos = (scrollWidth - containerWidth ) * pos;

el.scrollLeft = scrollPos;

if( $slide[0] && scrollPos < (scrollWidth - containerWidth) )

$slide[0].style.left = (scrollPos / scrollWidth ) * 100 + '%';

prevMore = el.scrollLeft > 0;

nextMore = el.scrollLeft < (scrollWidth - containerWidth);

$carousel.toggleClass('left', prevMore);

$carousel.toggleClass('right', nextMore);

}

$.fn.carousel = function(options){

$(document)

.on('mouseenter.carousel', '.' + bindToClass, calc)

.on('mousemove.carousel', '.' + bindToClass, move);

};

$.fn.carousel();

})(jQuery);

That’s It. Now you have successfully created jQuery Hover Carousel Slider With CSS, Slides With Mouse Direction. If you have any doubt or question comment down below.

jQuery Hover Carousel Slider With CSS | Slides With Mouse Direction

Preview Of Images Slides With Mouse Direction

jQuery Hover Carousel Slider With CSS Source Code

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY