Ce site utilise des cookies pour améliorer uniquement votre expérience utilisateur.
Vous pouvez lire à tout moment comment nous utilisons les cookies sur le site.
Slider Multiple
Résolu
Bonjour,
J'ai ces items là et je souhaite les transformer en un slider qui permetterais de parcourir ces items.
J'utilise présentement BootStrap.
Merci :)
Hello @Buildex,
Ces fichiers sont à placés dans la balise head. Tu dois prendres uniquement les fichiers que tu as besoin 😉
Pour cela clique sur la flèche vers le bas puis "Copy Link Tag" 😉
Merci, mais je fais quoi avec ces fichiers? @Kam3leoN
@Kam3leoN Ou puis-je les trouver?
alors la je peux pas te dire car j'utilise materialize et pas bootstrap
mais déjà as tu bien mis les bibliothèque dédiés à owl je ne les vois pas dans ton code.
Merci!
Par contre, j'ai un problème...
Je ne suis pas capable de le faire fonctionner correctement. Voici ce que ça donne.
Voici le code (dans un objet Custom Code de Bootstrap, j'ai mis HTML, CSS et JS ensemble) :
<!-- Two columns -->
<div class="d-flex flex-wrap mb-4 align-items-center hero">
<div class="col-md-7 d-flex align-items-center justify-content-center hero-bg">
<div class="hero-text ">
<h3 class="h3--flex m-0 mb-2 p-0 text-white font-weight-normal"> --- </h3>
<h1 class="h1--flex m-0 mb-4 p-0 text-white"> The choice of <br> people who care <br> about the earth</h1>
<div class="actions">
<a href="/collections/all"> Go to Shop </a>
</div>
</div>
</div>
<div class="col-md-5 p-0 ">
<div class="carousel-wrapper">
<div class="owl-carousel owl-theme">
<!-- 1 -->
<div class="owl-inner text-center pb-5">
<img src="https://www.megaport.fr/media/catalog/product/cache/2/small_image/720x/9df78eab33525d08d6e5fb8d27136e95/a/z/azza.png" alt="">
<h5> Bamboo Travel Cutlery Set </h5>
<p> The environment-friendly lifestyle choice, Lightweight and reusable. </p>
<a href="#">
<button class="btn-circle">
<i class="fa fa-angle-double-right"></i>
</button>
</a>
</div>
<!-- 1 end -->
<!-- 2 -->
<div class="owl-inner text-center pb-5">
<img src="https://www.megaport.fr/media/catalog/product/cache/2/small_image/720x/9df78eab33525d08d6e5fb8d27136e95/a/z/azza.png" alt="">
<h5> Title </h5>
<p> Short description </p>
<a href="#">
<button class="btn-circle">
<i class="fa fa-angle-double-right"></i>
</button>
</a>
</div>
<!-- 2 end -->
<!-- 3 -->
<div class="owl-inner text-center pb-5">
<img src="https://www.megaport.fr/media/catalog/product/cache/2/small_image/720x/9df78eab33525d08d6e5fb8d27136e95/a/z/azza.png" alt="">
<h5> Title </h5>
<p> Short description </p>
<a href="#">
<button class="btn-circle">
<i class="fa fa-angle-double-right"></i>
</button>
</a>
</div>
<!-- 3 end -->
<!-- 4 -->
<div class="owl-inner text-center pb-5">
<img src="https://www.megaport.fr/media/catalog/product/cache/2/small_image/720x/9df78eab33525d08d6e5fb8d27136e95/a/z/azza.png" alt="">
<h5> Title </h5>
<p> Short description </p>
<a href="#">
<button class="btn-circle">
<i class="fa fa-angle-double-right"></i>
</button>
</a>
</div>
<!-- 4 end -->
<!-- 5 -->
<div class="owl-inner text-center pb-5">
<img src="https://www.megaport.fr/media/catalog/product/cache/2/small_image/720x/9df78eab33525d08d6e5fb8d27136e95/a/z/azza.png" alt="">
<h5> Title </h5>
<p> Short description </p>
<a href="#">
<button class="btn-circle">
<i class="fa fa-angle-double-right"></i>
</button>
</a>
</div>
<!-- 5 end -->
</div>
</div>
</div>
</div>
<!-- <div id="slideshow">
<div id="slideshow-container">
<ul id="slides">
{% for product in collection.products %}
<li class="YourStyling">
<a href="{{ product.url }}"><img src="{{ product.featured_image | product_img_url: 'medium' }}" alt="{{ product.title | escape }}" /></a>
</li>
{% endfor %}
</ul>
</div>
</div> -->
<style>
/* utility */
.h1--flex {
font-size: calc(45px + 6 * ((100vw - 320px) / 680));
}
.h3--flex {
font-size: calc(15px + 6 * ((100vw - 320px) / 680));
}
/* left side */
.hero-bg {
width: 100%;
height: 700px;
position: relative;
top: 0;
left: 0;
/* z-index: -1; */
background: url(https://cdn.shopify.com/s/files/1/0034/6000/5961/files/eco-friendly-products-my-little-panda-2.jpg?9716) no-repeat center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
/* right side */
.carousel-wrapper {
width: 100%;
margin: 0 auto;
}
.owl-carousel {
position: relative;
}
.owl-nav {
margin-bottom: -100px;
}
.owl-carousel .owl-item {
-webkit-opacity: .5;
-moz-opacity: .5;
opacity: .5;
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
}
.owl-item.active.center {
opacity: 1;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
/* button */
.owl-inner button {
margin-top: 5px;
}
/* circle button */
.btn-circle {
margin: 0 auto;
display: block;
width: 55px;
height: 55px;
background: 0 0;
border-radius: 20%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
padding: 0;
border: 2px solid #d4e4ca;
font-size: 22px;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
position: relative;
transition-property: color;
-webkit-transition-property: color;
-moz-transition-property: color;
-o-transition-property: color;
transition-duration: .3s;
overflow: hidden;
cursor: pointer;
}
.btn-circle:hover i {
color: #fff;
}
.btn-circle:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #5ba52e;
transform: scaleY(0);
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-o-transform: scaleY(0);
transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transition-property: transform;
-webkit-transition-property: transform;
-moz-transition-property: transform;
-o-transition-property: transform;
transition: .3s ease-out;
-webkit-transition: .3s ease-out;
-moz-transition: .3s ease-out;
-o-transition: .3s ease-out;
}
.btn-circle:hover:before {
transform: scaleY(1);
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
}
/* carousel nav arrows */
.owl-nav {
}
.owl-prev, .owl-next {
position: absolute;
top: -70px;
background: transparent;
color: #333;
border-radius: 50%;
width: 55px;
height: 55px;
transition: all 400ms ease-in-out;
}
.owl-prev:hover, .owl-prev:active, .owl-prev:focus, .owl-next:hover, .owl-next:active, .owl-next:focus {
opacity: .5;
color: #000;
outline: none;
}
.owl-prev .fa, .owl-next .fa {
font-size: 50px;
position: relative;
}
.owl-prev {
left: 35%;
}
.owl-prev .fa {
right: 2px;
}
.owl-next {
right: 35%;
}
.owl-next .fa {
left: 2px;
}
/* carousel dots */
.owl-dots {
display: flex;
justify-content: center;
margin-top: 30px;
}
.owl-carousel .owl-dots .owl-dot span {
width: 11px;
height: 11px;
position: relative;
margin: 0 7.5px;
cursor: pointer;
background: #ccc;
display: block;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
transition: all .3s ease 0s;
-webkit-transition: all .3s ease 0s;
-moz-transition: all .3s ease 0s;
-o-transition: all .3s ease 0s;
}
.owl-carousel .owl-dots .owl-dot:hover span, .owl-carousel .owl-dots .owl-dot.active span {
background-color: #666;
}
</style>
<script>
$('.owl-carousel').owlCarousel({
items: 2,
center: true,
loop:true,
stagePadding: 50,
margin:10,
autoplay: false,
autoplayHoverPause: true,
nav: true,
dots: false,
lazyLoad: true,
navText: ['<i class="fa fa-angle-left"></i>', ' <i class="fa fa-angle-right"></i>'],
responsive:{
0:{
items:1,
nav: false,
dots: true
},
480:{
items:2,
nav: false,
dots: true
},
768:{
items:2
}
}
});
</script>
Yo,
Présentement tu as ceci ;) : https://codepen.io/inewton/pen/PbEzWO
et sinon perso je préfère celui là : https://codepen.io/andreiclep/pen/mZvedm
Ce site utilise des cookies pour améliorer uniquement votre expérience utilisateur.
Vous pouvez lire à tout moment comment nous utilisons les cookies sur le site.