├── images ├── product-1.jpg ├── product-2.jpg ├── product-3.jpg ├── product-4.jpg ├── product-5.jpg ├── product-6.jpg ├── product-7.jpg ├── product-8.jpg └── product-9.jpg ├── script.js ├── style.css ├── owl_carousel ├── owl.theme.default.css ├── owl.carousel.css └── owl.carousel.js └── index.html /images/product-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabinmagar/product-slider-bootstrap5-and-owl-carousel/HEAD/images/product-1.jpg -------------------------------------------------------------------------------- /images/product-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabinmagar/product-slider-bootstrap5-and-owl-carousel/HEAD/images/product-2.jpg -------------------------------------------------------------------------------- /images/product-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabinmagar/product-slider-bootstrap5-and-owl-carousel/HEAD/images/product-3.jpg -------------------------------------------------------------------------------- /images/product-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabinmagar/product-slider-bootstrap5-and-owl-carousel/HEAD/images/product-4.jpg -------------------------------------------------------------------------------- /images/product-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabinmagar/product-slider-bootstrap5-and-owl-carousel/HEAD/images/product-5.jpg -------------------------------------------------------------------------------- /images/product-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabinmagar/product-slider-bootstrap5-and-owl-carousel/HEAD/images/product-6.jpg -------------------------------------------------------------------------------- /images/product-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabinmagar/product-slider-bootstrap5-and-owl-carousel/HEAD/images/product-7.jpg -------------------------------------------------------------------------------- /images/product-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabinmagar/product-slider-bootstrap5-and-owl-carousel/HEAD/images/product-8.jpg -------------------------------------------------------------------------------- /images/product-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabinmagar/product-slider-bootstrap5-and-owl-carousel/HEAD/images/product-9.jpg -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | $('.owl-carousel').owlCarousel({ 2 | loop: true, 3 | margin: 0, 4 | responsiveClass: true, 5 | responsive: { 6 | 0:{ 7 | items: 1, 8 | }, 9 | 768:{ 10 | items: 2, 11 | }, 12 | 1100:{ 13 | items: 3, 14 | }, 15 | 1400:{ 16 | items: 4, 17 | loop: false, 18 | } 19 | } 20 | }); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap'); 2 | 3 | body{ 4 | font-family: 'Poppins', sans-serif; 5 | } 6 | .product-item{ 7 | border: 1px solid rgb(219, 219, 219); 8 | } 9 | .product-img{ 10 | position: relative; 11 | overflow: hidden; 12 | } 13 | .btns{ 14 | position: absolute; 15 | left: 0; 16 | bottom: -100%; 17 | font-size: 15px; 18 | font-weight: 300; 19 | transition: all 0.3s ease-in-out; 20 | } 21 | .btns button{ 22 | border: none; 23 | background-color: rgb(39, 39, 39); 24 | color: #fff; 25 | transition: all 0.3s ease-in-out; 26 | } 27 | .btns button:hover{ 28 | color: #fcb941; 29 | } 30 | .product-img:hover .btns{ 31 | bottom: 0; 32 | } 33 | 34 | .heart-icon{ 35 | position: absolute; 36 | top: 16px; 37 | right: 15px; 38 | font-size: 18px; 39 | } 40 | 41 | .product-type{ 42 | font-size: 13px; 43 | opacity: 0.8; 44 | } 45 | .product-name{ 46 | transition: all 0.3s ease-in-out; 47 | } 48 | .product-name:hover{ 49 | color: #fcb941!important; 50 | } 51 | .product-price{ 52 | color: #fcb941; 53 | } 54 | .rating{ 55 | font-size: 13px; 56 | } 57 | .product-item{ 58 | width: 300px; 59 | } -------------------------------------------------------------------------------- /owl_carousel/owl.theme.default.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | /* 7 | * Default theme - Owl Carousel CSS File 8 | */ 9 | .owl-theme .owl-nav { 10 | margin-top: 10px; 11 | text-align: center; 12 | -webkit-tap-highlight-color: transparent; } 13 | .owl-theme .owl-nav [class*='owl-'] { 14 | color: #FFF; 15 | font-size: 14px; 16 | margin: 5px; 17 | padding: 4px 7px; 18 | background: #D6D6D6; 19 | display: inline-block; 20 | cursor: pointer; 21 | border-radius: 3px; } 22 | .owl-theme .owl-nav [class*='owl-']:hover { 23 | background: #869791; 24 | color: #FFF; 25 | text-decoration: none; } 26 | .owl-theme .owl-nav .disabled { 27 | opacity: 0.5; 28 | cursor: default; } 29 | 30 | .owl-theme .owl-nav.disabled + .owl-dots { 31 | margin-top: 10px; } 32 | 33 | .owl-theme .owl-dots { 34 | text-align: center; 35 | -webkit-tap-highlight-color: transparent; } 36 | .owl-theme .owl-dots .owl-dot { 37 | display: inline-block; 38 | zoom: 1; 39 | *display: inline; } 40 | .owl-theme .owl-dots .owl-dot span { 41 | width: 10px; 42 | height: 10px; 43 | margin: 5px 7px; 44 | background: #D6D6D6; 45 | display: block; 46 | -webkit-backface-visibility: visible; 47 | transition: opacity 200ms ease; 48 | border-radius: 30px; } 49 | .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { 50 | background: #869791; } 51 | -------------------------------------------------------------------------------- /owl_carousel/owl.carousel.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | /* 7 | * Owl Carousel - Core 8 | */ 9 | .owl-carousel { 10 | display: none; 11 | width: 100%; 12 | -webkit-tap-highlight-color: transparent; 13 | /* position relative and z-index fix webkit rendering fonts issue */ 14 | position: relative; 15 | z-index: 1; } 16 | .owl-carousel .owl-stage { 17 | position: relative; 18 | -ms-touch-action: pan-Y; 19 | touch-action: manipulation; 20 | -moz-backface-visibility: hidden; 21 | /* fix firefox animation glitch */ } 22 | .owl-carousel .owl-stage:after { 23 | content: "."; 24 | display: block; 25 | clear: both; 26 | visibility: hidden; 27 | line-height: 0; 28 | height: 0; } 29 | .owl-carousel .owl-stage-outer { 30 | position: relative; 31 | overflow: hidden; 32 | /* fix for flashing background */ 33 | -webkit-transform: translate3d(0px, 0px, 0px); } 34 | .owl-carousel .owl-wrapper, 35 | .owl-carousel .owl-item { 36 | -webkit-backface-visibility: hidden; 37 | -moz-backface-visibility: hidden; 38 | -ms-backface-visibility: hidden; 39 | -webkit-transform: translate3d(0, 0, 0); 40 | -moz-transform: translate3d(0, 0, 0); 41 | -ms-transform: translate3d(0, 0, 0); } 42 | .owl-carousel .owl-item { 43 | position: relative; 44 | min-height: 1px; 45 | float: left; 46 | -webkit-backface-visibility: hidden; 47 | -webkit-tap-highlight-color: transparent; 48 | -webkit-touch-callout: none; } 49 | .owl-carousel .owl-item img { 50 | display: block; 51 | width: 100%; } 52 | .owl-carousel .owl-nav.disabled, 53 | .owl-carousel .owl-dots.disabled { 54 | display: none; } 55 | .owl-carousel .owl-nav .owl-prev, 56 | .owl-carousel .owl-nav .owl-next, 57 | .owl-carousel .owl-dot { 58 | cursor: pointer; 59 | -webkit-user-select: none; 60 | -khtml-user-select: none; 61 | -moz-user-select: none; 62 | -ms-user-select: none; 63 | user-select: none; } 64 | .owl-carousel .owl-nav button.owl-prev, 65 | .owl-carousel .owl-nav button.owl-next, 66 | .owl-carousel button.owl-dot { 67 | background: none; 68 | color: inherit; 69 | border: none; 70 | padding: 0 !important; 71 | font: inherit; } 72 | .owl-carousel.owl-loaded { 73 | display: block; } 74 | .owl-carousel.owl-loading { 75 | opacity: 0; 76 | display: block; } 77 | .owl-carousel.owl-hidden { 78 | opacity: 0; } 79 | .owl-carousel.owl-refresh .owl-item { 80 | visibility: hidden; } 81 | .owl-carousel.owl-drag .owl-item { 82 | -ms-touch-action: pan-y; 83 | touch-action: pan-y; 84 | -webkit-user-select: none; 85 | -moz-user-select: none; 86 | -ms-user-select: none; 87 | user-select: none; } 88 | .owl-carousel.owl-grab { 89 | cursor: move; 90 | cursor: grab; } 91 | .owl-carousel.owl-rtl { 92 | direction: rtl; } 93 | .owl-carousel.owl-rtl .owl-item { 94 | float: right; } 95 | 96 | /* No Js */ 97 | .no-js .owl-carousel { 98 | display: block; } 99 | 100 | /* 101 | * Owl Carousel - Animate Plugin 102 | */ 103 | .owl-carousel .animated { 104 | animation-duration: 1000ms; 105 | animation-fill-mode: both; } 106 | 107 | .owl-carousel .owl-animated-in { 108 | z-index: 0; } 109 | 110 | .owl-carousel .owl-animated-out { 111 | z-index: 1; } 112 | 113 | .owl-carousel .fadeOut { 114 | animation-name: fadeOut; } 115 | 116 | @keyframes fadeOut { 117 | 0% { 118 | opacity: 1; } 119 | 100% { 120 | opacity: 0; } } 121 | 122 | /* 123 | * Owl Carousel - Auto Height Plugin 124 | */ 125 | .owl-height { 126 | transition: height 500ms ease-in-out; } 127 | 128 | /* 129 | * Owl Carousel - Lazy Load Plugin 130 | */ 131 | .owl-carousel .owl-item { 132 | /** 133 | This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong 134 | calculation of the height of the owl-item that breaks page layouts 135 | */ } 136 | .owl-carousel .owl-item .owl-lazy { 137 | opacity: 0; 138 | transition: opacity 400ms ease; } 139 | .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) { 140 | max-height: 0; } 141 | .owl-carousel .owl-item img.owl-lazy { 142 | transform-style: preserve-3d; } 143 | 144 | /* 145 | * Owl Carousel - Video Plugin 146 | */ 147 | .owl-carousel .owl-video-wrapper { 148 | position: relative; 149 | height: 100%; 150 | background: #000; } 151 | 152 | .owl-carousel .owl-video-play-icon { 153 | position: absolute; 154 | height: 80px; 155 | width: 80px; 156 | left: 50%; 157 | top: 50%; 158 | margin-left: -40px; 159 | margin-top: -40px; 160 | background: url("owl.video.play.png") no-repeat; 161 | cursor: pointer; 162 | z-index: 1; 163 | -webkit-backface-visibility: hidden; 164 | transition: transform 100ms ease; } 165 | 166 | .owl-carousel .owl-video-play-icon:hover { 167 | -ms-transform: scale(1.3, 1.3); 168 | transform: scale(1.3, 1.3); } 169 | 170 | .owl-carousel .owl-video-playing .owl-video-tn, 171 | .owl-carousel .owl-video-playing .owl-video-play-icon { 172 | display: none; } 173 | 174 | .owl-carousel .owl-video-tn { 175 | opacity: 0; 176 | height: 100%; 177 | background-position: center center; 178 | background-repeat: no-repeat; 179 | background-size: contain; 180 | transition: opacity 400ms ease; } 181 | 182 | .owl-carousel .owl-video-frame { 183 | position: relative; 184 | z-index: 1; 185 | height: 100%; 186 | width: 100%; } 187 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 |Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque est neque facilis debitis, repellat dolorem.
24 |
30 |
33 |
71 |
74 |
112 |
115 |
153 |
156 |
194 |
197 |
235 |
238 |
276 |
279 |
317 |
320 |
358 |
361 |