owl carousel slide n by n - javascript

Using owl carousel and trying to slide items five by five, now i have 5 items, i want when i push next or prev button it move to next five item, currently it move to next item, is it possible?
$('.owl-carousel').owlCarousel({
loop:true,
items:5,
margin:10,
nav:true
})
Demo
i googled and checked plugin website but couldn't find anything.

Use the slideBy options in the owlCarousel config:
$('.owl-carousel').owlCarousel({
loop:true,
items: 5,
margin:10,
slideBy: 5, // slide 5 items
nav:true
})
.item {
background: red;
}
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>

You should include slideBy: 5 or slideBy: 'page' option, as they describe it on their documentation.
https://jsfiddle.net/w3ka3vqw/151/

Related

Implementing basic working owl.carousel.js in odoo 14

I'am migrating a template from odoo 12 to Odoo 14 and using "owl.carousel" and other JS, and none of them work. I got these errors when implementing owl.carousel :
odoo.define('website_theme.frontend_layout', function (require) {
'use strict';
$('.class1').owlCarousel({
navigation : true,
loop:true,
margin:10,
responsive:{
0:{ items:1
},
1000:{ items:2
},
2000:{
items:3}
}
})
$('.class2').vegasMenu();
});
<div class="d-none d-xl-block header-top">
<div class="container">
<div class="row align-items-center">
<div class="col-md-4 col-lg-7">
<div class="class1 owl-carousel owl-theme">
<div class="item">
</div>
<div class="item">
</div>....
Any help please? How can I solve it ?
You missed a comma on the navigation line

Bootstrap carousel next/prev methods force it to autoplay faster

I am using jquerySwipe plugin to add swipe feature to my carousel.
My carousel has autoplay feature when the page loads.And when i am swiping carousel it triggers next/prev events.
<body>
<div id='root'></div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js'></script>
<script>
$(document).ready(function(){
const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
$(".carousel-inner").swipe({
swipeLeft: function(event, direction, distance, duration, fingerCount, to, from){
if(width < 992){
this.parent().carousel('next');
}
},
swipeRight: function(){
if(width < 992){
this.parent().carousel('prev');
}
},
threshold: 0,
});
});
</script>
</body>
So after triggering lets say this.parent().carousel('next'), it starts to autoslide faster and without smooth behavior.
This is my html for bootstrap carousel.
<div className='about-us'>
<div id='carouselExampleIndicators' className='carousel slide' data-ride='carousel' data-interval={autoplayInterval} data-pause="false">
<div className='row flex-column-reverse flex-lg-row align-items-center about-us-row'>
<>
<div className='col-12 col-lg-6 about-us-left-column'>
<div className='card card about-us-card'>
<div className='carousel-inner'>
{sliderImageGenerator()}
</div>
</div>
</div>
<div className='col-12 col-lg-6 about-us-right-column'>
<div className='card about-us-card'>
<div className='card-body about-us-card-body'>
<div className='inner-content'>
<p className='card-title about-us-card-title'>{aboutUsPresentationText.title}</p>
<div className='about-us-div' dangerouslySetInnerHTML={{__html: textCorrection(aboutUsPresentationText.text)}}></div>
<CarouselSwitchers className='switcherWeb' clickEvent={onCheckboxChange} loopData={aboutUsPresentationImages} targetEl='#carouselExampleIndicators'/>
</div>
</div>
</div>
</div>
</>
</div>
</div>
</div>
How to solve this problem ?

Image is enlarging when scrolling down

I am displaying multiple images using a carousel. Images are displayed perfectly initially but when I scroll down and come back up, each of the images gets enlarged that they occupy the entire screen. Are there any fundamental properties that I am missing in code?
$(document).ready(function(){
$("#thecarousel").owlCarousel(
{items : 3,
loop : true,
margin : 1,
dots : true,
autoplay : true,
autoplayTimeout : 1300,
autoplayHoverPause : false,
responsive : {
0 : {
items : 1
},
400 : {
items : 2
},
768 : {
items : 3
}
}
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<div class="owl-carousel owl-theme" id="thecarousel">
<div class="item" style="width:280%">
<div class="col-xs-4" style="padding:30px">
<a>
<img src="{% static "images/Akorn" %}" alt="" />
</a>
</div>
</div>

Video carousel using owl.carousel.js is not working

Video carousel is not displayed in html page while trying to use owl.carousel.js. Anyone please help me to setup a video carousel in my website.
$('.owl-carousel').owlCarousel({
items:1,
merge:true,
loop:true,
margin:10,
video:true,
lazyLoad:true,
center:true,
responsive:{
480:{
items:2
},
600:{
items:3
}
}
})
<html>
<body>
<div class="owl-carousel owl-theme">
<div class="item-video" data-merge="3"><a class="owl-video" href="https://vimeo.com/23924346"></a></div>
<div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a></div>
<div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=FBu_jxT1PkA"></a></div>
</body>
</html>

owl carousel scroll to clicked item

I have a simple owl-carousel,
HTML:
<div class="owl-carousel">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
JavaScript:
$('.owl-carousel').owlCarousel({
items: 5,
loop:true,
nav:true,
margin: 10
})
Included:
owl.carousel.js
owl.carousel.min.css
JSFiddle http://jsfiddle.net/93cpX/62/
How to force the carousel scroll to the clicked item?
<html>
<head>
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<style>
.owl-carousel .item {
height: 80px;
background: #4DC7A0;
}
</style>
</head>
<body>
<div id="owl-demo">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
items : 5, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
// Custom Navigation Events
$(document).on('click', '.owl-item', function(){
n = $(this).index();
console.log(n)
$('.owl-wrapper').trigger('owl.goTo', n);
});
});
</script>
</body>
</html>
There are was few trouble with version, and thats why i send you full html page - try it to yourself!
You can try next code:
var sync2 = jQuery('.sync2').owlCarousel({
loop:true,
margin:0,
nav:false,
dots:false,
responsive:{
0:{
items:4
}
},
center: false,
navText: ["",""],
linked: ".sync1"
});
sync2.on('click', '.owl-item', function(event) {
var target = jQuery(this).index();;
sync2.owlCarousel('current',target);
});
Try this one>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
$('button').trigger('to.owl.carousel', 1);
None of the above worked for me , I just ended up storing the index of the last clicked item, and executing the following code :
//Select by id if one is set or via '$("".owl-carousel)'
var $carouselElement = $('#owl_carousel_id')
for(var i =0; i<lastClickedIndex; i++ ){
$carouselElement.trigger('next.owl.carousel');
}
Please note : My use case was a little bit different, I have multiple carousels stacked vertically. It would store index and the carousel id when an item was clicked. When the user navigated away and back to the original page, it would auto scroll to the correct carousel and carousel item.**
//Scroll to last selected carousel
$('html,body').animate({scrollTop: $carouselElement.offset().top},'fast');
//scroll to last clicked item
for(var i =0; i<lastClickedIndex; i++ ){
$carouselElement.trigger('next.owl.carousel');
}

Categories