Hey guys I am new at web development and wanted to install owl carousel on the page but nothing happens. Here is the code I have:
<section class="showcase">
<div class="owl-carousel">
<div><img src="./9781471407956.jpg" alt=""></div>
<div><img src="./9781471407956.jpg" alt=""></div>
<div><img src="./9781471407956.jpg" alt=""></div>
<div><img src="./9781471407956.jpg" alt=""></div>
</div>
</section>
Then I have included the links in inside head tag as
<link rel="stylesheet" href="./OwlCarousel2-2.3.4/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="./OwlCarousel2-2.3.4/dist/assets/owl.theme.default.min.css">
Finally, I included the javascript codes just before closing body:
<script src="./OwlCarousel2-2.3.4/docs/assets/vendors/jquery.min.js"></script>
<script src="./OwlCarousel2-2.3.4/dist/owl.carousel.min.js"></script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
I really need your help
var owl = jQuery('.owl-carousel');
owl.owlCarousel({
items: 1,
margin: 10,
autoplay: true,
autoPlay: 3000,
nav: false,
dots: false,
autoplayTimeout: 3000,
autoplayHoverPause: true,
loop: true,
});
Then in style include
.owl-item {
float:left
}
Related
I'm using the Swiper script to show a slider with a mix of landscape and portrait photos on a site and I was wondering if it's possible to set a specific max height so all images have the same height respecting their aspect ratio. I know that there is a height parameter on Swiper but I tried it but it doesn't seem to make any difference. Also, I tried to set a max-height on the .swiper-wrapper class or the images inside it .swiper-slide > img but the images are either clipped or distorted.
Any ideas?
Thanks
var swiper = new Swiper( '.swiper-container', {
initialSlide: 0,
loop: true,
autoHeight: true,
height: 200,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
The easiest solution would be adding height: auto to the swiper-slider and height: 100% to the content inside.
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'horizontal',
slidesPerView: "auto",
centeredSlides: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
.swiper {
width: 600px;
height: 100%;
}
.swiper-slide {
background-color: grey;
height: auto !important;
text-align: center;
}
.swiper-content {
height: 100% !important
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Website</title>
<link rel="stylesheet" href="./style.css">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
</head>
<body>
<main>
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="swiper-content">
<p>Slide 1 Content</p>
<p>Slide 1 Content</p>
<p>Slide 1 Content</p>
<p>Slide 1 Content</p>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content">
<p>Slide 2 Content</p>
</div>
</div>
<div class="swiper-slide medium-content">
<div class="swiper-content">
<p>Slide 3 Content</p>
<p>Slide 3 Content</p>
</div>
</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</main>
<script src="index.js"></script>
</body>
</html>
I have this Owl code
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items:1,
autoplay:true,
autoplayTimeout:3500,
loop:true,
});
});
</script>
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item">
<img id="city-img" width="100%" class="back-img-city" src="img/city.png" />
<img id="img-river" width="100%" class="back-img-river" src="img/river.png" />
</div>
</div>
Can I somehow write a script like this:
<script>
if(current owl slide is 2){
alert("Your slide is 2. Congrats");
}
</script>
Meaning is to, for example, alert if its 2nd slide on the screen.
Try using changed.owl.carousel event
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 3500,
loop: true
}).on('changed.owl.carousel', function(event) {
if (event.page.index + 1 == 2) {
alert("Your slide is 2. Congrats");
}
})
});
<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" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous"
/>
<div id="owl-demo" class="owl-carousel owl-theme">
<div> Your Content 1</div>
<div> Your Content 2</div>
<div> Your Content 3</div>
</div>
I'm trying to center a couple of images in a carousel with slickJS, however it is not properly centering the images due to the left offset being wrong. Anyway to fix this? Any recommendations of a JavaScript carousal that actually does the job? I pulled the code directly from the slick website and it doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="/app/source/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/app/source/slick/slick-theme.css"/>
<style>
</style>
</head>
<body>
<div class="center">
<div><img src="/app/source/img/pocky.jpg" alt="pocky"></div>
<div><img src="/app/source/img/shrimp.jpg" alt="shrimp"></div>
<div><img src="/app/source/img/pocky.jpg" alt="pocky"></div>
<div><img src="/app/source/img/shrimp.jpg" alt="shrimp"></div>
<div><img src="/app/source/img/pocky.jpg" alt="pocky"></div>
<div><img src="/app/source/img/shrimp.jpg" alt="shrimp"></div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="/app/source/slick/slick.min.js"></script>
<script type="text/javascript">
//straight from the website
$(document).ready(function(){
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
</script>
</body>
</html>
Result:
As you can see it is not aligning to the center properly and you can even see alittle of the 4th slide even though it is set to show only 3 slides. Any help is greatly appreciated!
The reason you are seeing the partial views of the edge images is because you have centerMode enabled in your setting, either remove it or set it to false to get rid of that edge view. Additionally, its not that the divs are taking up unequal widths, its that the images inside them are floating to the left, so it looks like there is extra space to the right, after the last image. To fix this just center the image withing its parent div using margin:auto.
$(document).ready(function() {
$('.center').slick({
//centerMode: true,
//centerPadding: '160px',
slidesToShow: 3,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
//centerMode: true,
//centerPadding: '140px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
//centerMode: true,
//centerPadding: '40px',
slidesToShow: 2
}
}
]
});
});
img{
margin:auto;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<div class="center">
<div><img src="http://loremflickr.com/320/240?1" alt="pocky"></div>
<div><img src="http://loremflickr.com/320/240?2" alt="shrimp"></div>
<div><img src="http://loremflickr.com/320/240?3" alt="pocky"></div>
<div><img src="http://loremflickr.com/320/240?3" alt="shrimp"></div>
<div><img src="http://loremflickr.com/320/240?4" alt="pocky"></div>
<div><img src="http://loremflickr.com/320/240?5" alt="shrimp"></div>
</div>
My code:
<html>
<head>
<link rel="stylesheet" type='text/css' href='../style.css'>
<link rel="stylesheet" type='text/css' href='//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=slick-carousel&file=slick.css'>
<link rel="stylesheet" type='text/css' href='//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=slick-carousel&file=slick-theme.css'>
</head>
<body>
<div class="slideCont">
<div class="slider-info">
<div>Info</div>
<div>Info2</div>
<div>Info3</div>
<div>Info4</div>
</div>
<div class="slider-img">
<div>Img</div>
<div>Img2</div>
<div>Img3</div>
<div>Img4</div>
</div>
</div>
<script src="//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=jquery&file=jquery.min.js"></script>
<script src="//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=jquery-migrate&file=jquery-migrate.min.js"></script>
<script src="//cdn.unreal-designs.co.uk/cont/cdnjslatest/?lib=slick-carousel&file=slick.min.js"></script>
<script>
$(document).ready(function(){
$('.slider-info').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-img'
});
$('.slider-img').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-info',
dots: true,
centerMode: true,
focusOnSelect: true
});
});
</script>
</body>
</html>
This is meant to be like the Slider Syncing sample on here: http://kenwheeler.github.io/slick/ (near the bottom of the examples)
My code can be seen live here: http://new.unreal-designs.co.uk/portfolio/ but the each slide is full width, rendering it rather useless.
Style.css only contains basic stuff that shouldn't effect the slider in any way.
Ok, so after playing around I think I've found the issue. Slick isn't changing the height of the slides to fit the content, thus the slide fills the page -.-
Not sure how to fix this though in JS.
I'm using the Owl Carousel on a Magento site and I can get the slides showing properly, but cannot control the slider using any of it's functions... here's my html code:
<div id="main-slider" class="owl-carousel mobile-slider">
<div class="item">{{block type="cms/block" block_id="block_slide1"}}</div>
<div class="item">{{block type="cms/block" block_id="block_slide2"}}</div>
<div class="item">{{block type="cms/block" block_id="block_slide3"}}</div>
<div class="item">{{block type="cms/block" block_id="block_slide4"}}</div>
<div class="item">{{block type="cms/block" block_id="block_slide5"}}</div>
</div>
And here's my controls that I placed directly after the above html:
jQuery(document).ready(function(){
jQuery('#main-slider').owlCarousel({
singleItem: true,
slideSpeed: 200,
stopOnHover: true,
navigation: true
});
});
And here's the error in console that I'm returning:
In my header I have:
<link rel="stylesheet" type="text/css" href="js/nwdthemes/owl-carousel/owl.carousel.css" />
<link rel="stylesheet" type="text/css" href="js/nwdthemes/owl-carousel/owl.theme.css" />
<link rel="stylesheet" type="text/css" href="js/nwdthemes/owl-carousel/owl.transitions.css" />
<script type="text/javascript" src="js/nwdthemes/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/nwdthemes/owl-carousel/owl.carousel.min.js"></script>
And here is the output of the carousel, 'singleItem: true' doesn't seem to work as it's showing 2 slides at once:
{
// ...
stopOnHover: false,
autoplayHoverPause:true,
// ...
}