How to make carousel full width on mobile view

How to make carousel full width on mobile view - javascript

How to make my carousel turns to full width when I view on mobile phone or smaller screen device?
Any help would be appreciated.
You can check out the code below or simply view on my codepen here - https://codepen.io/nurzamf-the-lessful/pen/ZEodKGO
<div class="contain">
<div id="owl-carousel" class="owl-carousel owl-theme">
<div class="item">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEi9MjLHgzg-8RYlTEZFFZ21FGuldcTSSv2wZHf1nGh6KGgwMAznhwkDlpgyt0pxtMxODbGvftKhgPFbNp46_Jv_45WF64GI7Y5ldi6eZQSTZ5twNS3OkdGY8tBF4vo0Zun3WpLSBiTYy3dBWI0Q0fSyS_mV6PU4XyiW_WA3DcZLSnRKJmiFjG2p6D0_=s1600" class="img-responsive" />
</div>
<div class="item">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEiTZxD__KXQgaGHq_Xm_Jy7kA44vsdwijCR4VrsJI5uGDptJYp2ujRiVX6_6hNA-mCkh9OezjOBddFRYoAVGIT5omKqQcZnn8mFPtyae72oS7I-_pBQs2-5UnYTZ6VVIyBwQQL6RNJrOPjXiiV1jyHBRDOIxi_6Yyw8Nh2hRZfgrYgJiG_F4ljNnJ4J=s1600" class="img-responsive" />
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
<div class="item">
5
</div>
<div class="item">
6
</div>
</div>
</div>
.contain {
width: 100%;
}
.item {
width:100%;
color: white;
display: block;
}
$('#owl-carousel').owlCarousel({
loop: true,
margin: 0,
dots: true,
nav: true,
items: 2,
})

Hope It's Work for you !!!
jQuery(document).ready(function(){
jQuery('#owl-carousel').owlCarousel({
loop: true,
margin: 0,
dots: true,
nav: true,
items: 2,
responsiveClass:true,
responsive:{
1000:{
items:2,
nav:true,
loop:true
},
600:{
items:1,
nav:true,
loop:true
},
0:{
items:1,
nav:true,
loop:true
}
}
});
});
.contain {
width: 100%;
}
.item {
width:100%;
color: white;
background-color: salmon;
display: block;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dashboard</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
</head>
<body>
<div class="contain">
<div id="owl-carousel" class="owl-carousel">
<div class="item">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEi9MjLHgzg-8RYlTEZFFZ21FGuldcTSSv2wZHf1nGh6KGgwMAznhwkDlpgyt0pxtMxODbGvftKhgPFbNp46_Jv_45WF64GI7Y5ldi6eZQSTZ5twNS3OkdGY8tBF4vo0Zun3WpLSBiTYy3dBWI0Q0fSyS_mV6PU4XyiW_WA3DcZLSnRKJmiFjG2p6D0_=s1600" class="img-responsive" />
</div>
<div class="item">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEiTZxD__KXQgaGHq_Xm_Jy7kA44vsdwijCR4VrsJI5uGDptJYp2ujRiVX6_6hNA-mCkh9OezjOBddFRYoAVGIT5omKqQcZnn8mFPtyae72oS7I-_pBQs2-5UnYTZ6VVIyBwQQL6RNJrOPjXiiV1jyHBRDOIxi_6Yyw8Nh2hRZfgrYgJiG_F4ljNnJ4J=s1600" class="img-responsive" />
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
</body>
</html>

Related

Owl carousel swiping slides makes element taller

enter image description here
The incoming slides being scrolled change height, but then snap back to the height the are supposed to be, only while scrolling.
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
items: 4,
responsiveClass: true,
responsive: {
0: {
items: 4,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 5,
nav: true
}
}
})
});
.slide {
width: 240px;
height: 350px;
}
<div class="container">
<div class="owl-carousel owl-theme">
<div class="slide" style="background-color: black;"> Your Content </div>
<div class="slide" style="background-color: red;"> Your Content </div>
<div class="slide" style=" background-color: green;"> Your Content </div>
<div class="slide" style=" background-color: blue;"> Your Content </div>
<div class="slide" style=" background-color: purple;"> Your Content </div>
<div class="slide" style="background-color: orange;"> Your Content </div>
<div class="slide" style="background-color: black;"> Your Content </div>
</div>
</div>
Using min-height and max-height did not work either

$(document).ready(function() {
$('.owl-carousel').owlCarousel({
//Autoplay
autoPlay : true,
goToFirst : true,
goToFirstSpeed : 1000,
loop: true,
items: 4,
responsiveClass: true,
responsive: {
0: {
items: 4,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 5,
nav: true
}
}
})
});
.slide {
width: 240px;
height: 350px;
}
<!-- Basic stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css">
<!-- You can use latest version of jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!-- Include js plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<div class="container">
<div class="owl-carousel owl-theme">
<div class="slide" style="background-color: black;"> Your Content </div>
<div class="slide" style="background-color: red;"> Your Content </div>
<div class="slide" style=" background-color: green;"> Your Content </div>
<div class="slide" style=" background-color: blue;"> Your Content </div>
<div class="slide" style=" background-color: purple;"> Your Content </div>
<div class="slide" style="background-color: orange;"> Your Content </div>
<div class="slide" style="background-color: black;"> Your Content </div>
</div>
</div>

Owl carousel not showing images despite height given

I have the following code snippet from my template whre I've used owl carousel jquery library for slider.
$('.owl-carousel').owlCarousel({
items: 1,
lazyLoad: false,
loop: true
});
.owl-carousel .owl-lazy {
background-size: cover;
background-position: center center;
width: 100%;
height: 100vh;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<section class="slider-wrapper">
<div class="owl-carousel owl-theme">
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?nature"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?food"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?travel"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?work"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?pet"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?music"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?friends"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?movie"></div>
</div>
</section>
I'm looking forward to create a full height and width carousel. Although I have given the height to the image container owl-lazy the images are not visible. The above code only dot navigation.

Here's a solution if you want to implement it as a background-image instead of a <img> Tag.
I Just set lazyLoad: true and defined a min-height on the background-image Container.
$('.owl-carousel').owlCarousel({
items: 1,
lazyLoad: true,
loop: true
});
.owl-carousel .owl-lazy {
background-size: cover;
background-position: center center;
width: 100%;
min-height: 100vh;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<section class="slider-wrapper">
<div class="owl-carousel owl-theme">
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?nature"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?food"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?travel"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?work"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?pet"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?music"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?friends"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?movie"></div>
</div>
</section>

Slick Slider fade true not working with vertical slider

I want to implement a slick vertical slider with option fade: true. I want a fading effect in the vertical slider. It is showing the first slide but 2nd and 3rd slides are not visible.
Below is the code that I had tried.
$('.MySlider').slick({
vertical: true,
dots: true,
infinite: true,
speed: 500,
fade: true
});
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css">
<section>
<div class="MySlider">
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/600/300" alt="" />
</div>
</div>
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/600/300" alt="" />
</div>
</div>
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/600/300" alt="" />
</div>
</div>
</div>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>

I had resolved my issue by giving my custom CSS.
$('.MySlider').slick({
dots: true,
infinite: true,
speed: 500,
vertical:true,
verticalSwiping: true
});
.slick-slide {
opacity:0;
transition:opacity 0.5s ease-out;
}
.slick-active {
opacity:1!important;
transition:opacity 0.5s ease-in;
}
.slick-cloned {
opacity: 0.3;
}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css">
<section>
<div class="MySlider">
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/600/300" alt="" />
</div>
</div>
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/700/300" alt="" />
</div>
</div>
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/800/300" alt="" />
</div>
</div>
</div>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>

Sliding of an image using carousel

I have problem with carousel,
I have tried a lot, but I am not able to solve
I have one carousel with 4 images.Here i want to like in 1st iteration:
1-2-3-4
2nd iteration: 4-5-6-7
3rd iteration:7-8-9-10
this will when we click on corousel.
here is my code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="CustomStyles.css" rel="stylesheet">
<script>
$(document).ready(function () {
$('#myCarousel').carousel({
interval: false
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});
</script>
<style>
.carousel-inner .active.left { left: -25% ; }
.class-inner .active.right{left : 25%;}
.carousel-inner .next { left: 25% ; }
.carousel-inner .prev { left: -25% ; }
.carousel-control { width: 4%; }
.carousel-control.left,.carousel-control.right {margin-left:-15px;background-image:none;}
</style>
</head>
<body>
<div class="col-xs-12 text-center" style=" direction: ltr">
<div class="col-md-10 col-md-offset-1">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-3"><img src="1.jpg" href="sa.html" class="img-responsive">1</div>
</div>
<div class="item">
<div class="col-md-3"><img src="2.jpg" class="img-responsive">2</div>
</div>
<div class="item">
<div class="col-md-3"><img src="3.jpg" class="img-responsive">3</div>
</div>
<div class="item">
<div class="col-md-3"><img src="4.jpg" class="img-responsive">4</div>
</div>
<div class="item">
<div class="col-md-3"><img src="5.jpg" class="img-responsive">5</div>
</div>
<div class="item">
<div class="col-md-3"><img src="6.jpg" class="img-responsive">6</div>
</div>
<div class="item">
<div class="col-md-3"><img src="7.jpg" class="img-responsive">7</div>
</div>
<div class="item">
<div class="col-md-3"><img src="8.jpg" class="img-responsive">8</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</body>
</html>

I think it would be better to use a different carousel:
http://bxslider.com/examples/carousel-dynamic-number-slides
It's easy to use and responsive ;)

Here you find exactly what you want.
http://kenwheeler.github.io/slick/
Please find below working demo.
<!DOCTYPE html>
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
</style>
</head>
<body>
<section class="regular slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
</section>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>
</body>
</html>

Owl Carousel 2 animation not work

I have followed this instructions, but the slider not do the fadeOut and fadeIn animation: http://www.owlcarousel.owlgraphic.com/demos/animate.html
Head Css:
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.css">
Html item:
<div id="product-designs-presentation" class="owl-carousel">
<div style="width:186px">
<img src="svg/shirt-design-1.svg" alt="">a
</div>
<div style="width:186px">
<img src="svg/shirt-design-2.svg" alt="">
</div>
</div>
Javascript:
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script>
$( document ).ready(function() {
$('#product-designs-presentation').owlCarousel({
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:1,
autoPlay:true,
autoPlayTimeout:1000,
autoplayHoverPause:true,
navigation: true,
navigationText: ["prev","next"]
});
});
</script>
What is the problem?

You missed class class='owl-carousel'this is needed for owl-carousel working. I think this is the problem owl docs
<div id="product-designs-presentation" class="owl-carousel">
<div style="width:186px">
<img src="svg/shirt-design-1.svg" alt="">a
</div>
<div style="width:186px">
<img src="svg/shirt-design-2.svg" alt="">
</div>
</div>
Use this css this is working
$(document).ready(function() {
$('#product-designs-presentation').owlCarousel({
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:1,
autoPlay:true,
autoPlayTimeout:1000,
autoplayHoverPause:true,
navigation: true,
navigationText: ["prev","next"]
});
});
<link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>
<div id="product-designs-presentation" class="owl-carousel">
<div style="width:186px">
<img src="http://static.vecteezy.com/system/resources/previews/000/095/621/original/free-leaf-vector.png" alt="">a
</div>
<div style="width:186px">
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/15/29/maple-149907_960_720.png" alt="">b
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

How to make carousel full width on mobile view - javascript

Related

Owl carousel swiping slides makes element taller

Owl carousel not showing images despite height given

Slick Slider fade true not working with vertical slider

Sliding of an image using carousel

Owl Carousel 2 animation not work

Categories

Resources