jQuery Hover Carousel Slider With CSS | Slides With Mouse Direction - Web Developers Tricks, w3schools , HTML , CSS , PHP , Jquery , javascript , Tutorials

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.

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<!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='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script  src="function.js"></script>

</body>

</html>

style.css

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

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

Home Top Ad

jQuery Hover Carousel Slider With CSS | Slides With Mouse Direction

jQuery Hover Carousel Slider With CSS Source Code

Aucun commentaire

Socialize

Popular

Labels

Categories

Archive

Tags

Popular Posts