owl carousel scroll to clicked item - javascript

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');
}

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

Owl Carousel conflicts with my javascript

Whenever I have 2 Owl-Carousel's on 1 site my hamburger menu doesn't work anymore.
I used flew as the base for my website. It uses jQuery v2.1.4.
Header HTML:
<header class="navbar navbar-default navbar-custom navbar-fixed-top affix" role="banner">
<div class="container">
<div class="header-inner">
<nav role="navigation">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</nav>
</div>
</div>
Owl Carousel HTML:
<div>
<div class="container"> <!-- Owl Carousel 1 -->
<div class="row">
<div class="owl-carousel-one">
<div> <!-- content --> </div>
<div> <!-- content --> </div>
</div>
</div>
</div>
<div class="container"> <!-- Owl Carousel 2 -->
<div class="row">
<div class="owl-carousel-two">
<div> <!-- content --> </div>
<div> <!-- content --> </div>
</div>
</div>
</div>
</div>
Hamburger menu / Header JS:
;(function () {
var mobileMenuOutsideClick = function() {
$(document).click(function (e) {
var container = $("#tsj-offcanvas, .js-tsj-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ( $('body').hasClass('offcanvas-visible') ) {
$('body').removeClass('offcanvas-visible');
$('.js-tsj-nav-toggle').removeClass('active');
}
}
});
};
var offcanvasMenu = function() {
$('body').prepend('<div id="tsj-offcanvas" />');
$('#tsj-offcanvas').prepend('<ul id="tsj-side-links">');
$('body').prepend('<i></i>');
$('#tsj-offcanvas').append($('#tsj-header nav').clone());
};
var burgerMenu = function() {
$('body').on('click', '.js-tsj-nav-toggle', function(event){
var $this = $(this);
$('body').toggleClass('tsj-overflow offcanvas-visible');
$this.toggleClass('active');
event.preventDefault();
});
$(window).resize(function() {
if ( $('body').hasClass('offcanvas-visible') ) {
$('body').removeClass('offcanvas-visible');
$('.js-tsj-nav-toggle').removeClass('active');
}
});
$(window).scroll(function(){
if ( $('body').hasClass('offcanvas-visible') ) {
$('body').removeClass('offcanvas-visible');
$('.js-tsj-nav-toggle').removeClass('active');
}
});
};
}());
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
Owl Carousel (it's in the same function as the Hamburger menu / Header):
;(function () {
var oneCarousel = function(){
var owl = $('.owl-carousel-one');
owl.owlCarousel({
loop:true,
margin:0,
autoHeight:true,
smartSpeed: 500,
responsiveClass:true,
responsive:{
0:{
items:1,
},
1000:{
items:1,
nav:false,
dots: true,
}
}
});
};
$(function(){
fullHeight();
sliderMain();
centerBlock();
responseHeight();
mobileMenuOutsideClick();
offcanvasMenu();
burgerMenu();
toggleBtnColor();
contentWayPoint();
oneCarousel();
});
var twoCarousel = function(){
var owl = $('.owl-carousel-two');
owl.owlCarousel({
loop:true,
margin:0,
autoHeight:false,
smartSpeed: 500,
responsiveClass:true,
responsive:{
0:{
items:1,
},
1000:{
items:1,
nav:false,
dots: true,
}
}
});
};
$(function(){
fullHeight();
sliderMain();
centerBlock();
responseHeight();
mobileMenuOutsideClick();
offcanvasMenu();
burgerMenu();
toggleBtnColor();
contentWayPoint();
twoCarousel();
});
}());
Also this is the error message I receive when I click on the hamburger menu:
main.js:249 Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.<anonymous> (main.js:249)
at HTMLAnchorElement.dispatch (jquery.min.js:3)
at HTMLAnchorElement.r.handle (jquery.min.js:3)
EDIT: Whenever I delete 1 Carousel (doesn't matter which one), my hamburger menu works again.
I found the answer!
You have to add the "owl-carousel" class on your carousels.
<div>
<div class="container"> <!-- Owl Carousel 1 -->
<div class="row">
<div class="owl-carousel owl-carousel-one">
<div> <!-- content --> </div>
<div> <!-- content --> </div>
</div>
</div>
</div>
<div class="container"> <!-- Owl Carousel 2 -->
<div class="row">
<div class="owl-carousel owl-carousel-two">
<div> <!-- content --> </div>
<div> <!-- content --> </div>
</div>
</div>
</div>
AND I made the mistake of launching the same function twice.
$(function(){
fullHeight();
sliderMain();
centerBlock();
responseHeight();
mobileMenuOutsideClick();
offcanvasMenu();
burgerMenu();
toggleBtnColor();
contentWayPoint();
oneCarousel();
});
$(function(){
fullHeight();
sliderMain();
centerBlock();
responseHeight();
mobileMenuOutsideClick();
offcanvasMenu();
burgerMenu();
toggleBtnColor();
contentWayPoint();
twoCarousel();
});
You need to fuse them:
$(function(){
fullHeight();
sliderMain();
centerBlock();
responseHeight();
mobileMenuOutsideClick();
offcanvasMenu();
burgerMenu();
toggleBtnColor();
contentWayPoint();
oneCarousel();
twoCarousel();
});

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>

owl carousel slide n by n

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/

Sly Scroller Jquery

i would like to use following plugin http://darsa.in/sly/ but i cant get it to work, here are some details to my code.
i have following HTML:
<div class="scroller">
<div class="scrollbar">
<div class="handle" style="-webkit-transform: translateZ(0px) translateX(0px);"></div>
</div>
<div class="sly" style="overflow: hidden;">
<ul class="slidee" style="-webkit-transform: translateZ(0);">
<li><div style="width:50px;height:50px;overflow:hidden"><img src="/images/users/7.jpg"></div></li>
<li><div style="width:50px;height:50px;overflow:hidden"><img src="/images/users/7.jpg"></div></li></ul>
</div>
</div>
and following JS:
$(document).find(".scroller").each(function (i, element) {
var $cont = $(element),
$frame = $cont.find(".sly"),
$scrollbar = $cont.find(".scrollbar");
$frame.sly({
// Sly type
horizontal: 1, // Change to horizontal direction.
itemNav: null, // Item navigation type. Can be: basic, smart, centered, forceCentered.
// Scrollbar
scrollBar: $scrollbar, // Selector or DOM element for scrollbar container.
dragHandle: 0, // Whether the scrollbar handle should be dragable.
dynamicHandle: 0, // Scrollbar handle represents the relation between hidden and visible content.
minHandleSize: 50, // Minimal height or width (depends on sly direction) of a handle in pixels.
clickBar: 0, // Enable navigation by clicking on scrollbar.
syncFactor: 0.50, // Handle => SLIDEE sync factor. 0-1 floating point, where 1 = immediate, 0 = infinity.
});
$frame.sly('reload');
});
But somehow Sly-Scroller doesn't work? Thanks for help!
First of all Load all the Scripts for SLY in the end of your body :
<script src="js/jquery.easing.js"></script>
<script src="sly/horizontal.js"></script>
<script src="http://darsa.in/sly/js/vendor/modernizr.js"></script>
<script src="http://darsa.in/sly/js/sly.min.js" ></script>
Then Call the HTML like this :
<div id="navigation">
<div class="wrap">
<h2>Video Playlist</h2>
<div class="scrollbar" style = "width:100%">
<div class="handle">
<div class="mousearea"></div>
</div>
</div>
<div class="frame " id="basic">
<ul class="clearfix">
<li> </li>
</ul>
</div>
<ul class="pages"></ul>
</div>
</div>
here you go! Credit goes to this blog writer...
don't forget to click on "download", see more details there!
http://www.okilla.com/614/plugin-sly-scrolling-with-item-based-navigation-support/
try this, its work for me
$(document).find('.row').each(function () {
var $slider = $(this).find('#contentSlider');
var $wrap = $slider.parent();
$slider.sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 1,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
pagesBar: $wrap.find('.pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1
});
});

Categories