firstly here's the fiddle: http://jsfiddle.net/krish7878/m2gnrx2v/1/
There are two instances of owl slider with custom controls each generated by its own code, the problem is, when the controls are clicked both the sliders respond instead of the respective slider responding.
HTML:
<div class="customNavigation">
<a class="btn prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="btn next">
<i class="fa fa-chevron-right"></i>
</a>
JS:
// Custom Navigation Events
$(".next").click(function(){
slider1.trigger('owl.next');
})
$(".prev").click(function(){
slider1.trigger('owl.prev');
})
The code is a bit long (but very simple), please have a look at the fiddle
This must be a javascript issue, something must be changed somewhere, I tried changing the class names of buttons but they stopped working.
$(".next") action affects to all next css class. Use different CSS class or use a more complex expression like #slider1 > .next if buttons are inside the slider or changing .next with .nextslider1 and .nextslider2
example (http://jsfiddle.net/krish7878/m2gnrx2v/1/)
Html:
<div class="container">
<div id="slider-1">
...
</div>
<div class="customNavigation">
<a class="btn prev1"><i class="fa fa-chevron-left"></i></a>
<a class="btn next1"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
...
<div class="container">
<div id="slider-2">
...
</div>
<div class="customNavigation">
<a class="btn prev2"><i class="fa fa-chevron-left"></i></a>
<a class="btn next2"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
Javascript:
$(document).ready(function() {
var slider1 = $("#slider-1");
slider1.owlCarousel({
autoPlay: 3000,
items : 5,
pagination: false,
stopOnHover: true,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
$(".next1").click(function(){ slider1.trigger('owl.next'); });
$(".prev1").click(function(){ slider1.trigger('owl.prev'); });
var slider2 = $("#slider-2");
slider2.owlCarousel({
autoPlay: 3000,
items : 5,
pagination: false,
stopOnHover: true,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
$(".next2").click(function(){ slider2.trigger('owl.next'); });
$(".prev2").click(function(){ slider2.trigger('owl.prev'); });
});
Also you can make it smaller using a function that composes each slider
function doSlider(num){
var slider = $("#slider-" +num);
slider.owlCarousel({
autoPlay: 3000,
items : 5,
pagination: false,
stopOnHover: true,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
$(".next"+num).click(function(){slider.trigger('owl.next');});
$(".prev"+num ).click(function(){slider.trigger('owl.prev');});
}
$(document).ready(function() {
doSlider(1);
doSlider(2);
});
You use the same click event for each set of buttons.
I changed your html to:
<div class="customNavigation">
<a class="btn1prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="btn1next">
<i class="fa fa-chevron-right"></i>
</a>
and the js accordingly:
// Custom Navigation Events
$(".btn1next").click(function(){
slider1.trigger('owl.next');
})
$(".btn1prev").click(function(){
slider1.trigger('owl.prev');
})
Notice the btn1next and btn1prev. I did the same thing for the 2nd buttons.
The js fiddle: http://jsfiddle.net/krish7878/m2gnrx2v/1/
Related
What I've done
Included the script tag to the CDN as provided by the desandro docs
Wrapped the imagesLoaded function around initializing my grid using Isotope
Changed the default #container to match my parent container, which is .gifts
Initialized isotope after my dynamic content in my scripts.js
In the past, I've also tried calling the layout again after initializing the grid using iso.layout()
Objective
.gift elements should not overlap each other
scripts.js
// Dynamically loaded content
// Show all gifts
var giftsContainer = $("#posts-container");
var giftTemplate = $("#post-template").html();
gifts.forEach(function(gift) {
var templateItem = $(giftTemplate);
// Replace text with data from spreadsheet
templateItem.find(".gift__image").attr("src", gift.ImageURL);
templateItem.find(".gift__name").text(gift.Name);
templateItem.find(".gift__price").text("$"+gift.Price);
templateItem.find(".gift__description").text(gift.Description);
// Add data attributes for sorting, cannot be place onto .gift
templateItem.addClass(gift.CategoryFixed);
templateItem.addClass(gift.Type);
giftsContainer.append(templateItem);
// Removes Amazon link for those that don't have one
if (gift.URL !== "amazon.com") {
templateItem.find(".btn--buy").css("display", "none");
}
if (gift.Price === "-") {
templateItem.find(".gift__price").css("display", "none");
}
});
$('.gifts').imagesLoaded( function() {
var $grid = $('.gifts').isotope({
itemSelector: '.gift',
layoutMode: 'masonry',
getSortData: {
name: '.gift__name',
price: '.gift__price',
}
});
});
index.html
<!-- Gift -->
<div class="gift" data-id="">
<!-- -->
<img src="" data-original="" class="gift__image lazy">
<p class="gift__name"></p>
<p class="gift__price"></p>
<p class=""><span class="gift__description"></span> </p>
<p class="gift__category"></p>
<p class="gift__type"></p>
<!-- <div class="group--share">
<div class="gift__share">
<div class="gift__icons">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-pinterest-p" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
</div> -->
<button class="btn btn--buy">Buy on Amazon</button>
</div>
</div> <!-- .gift -->
I've used the following code to init the bootstrap popover.
Markup
<a class="help_popup" rel="popover" data-popover-content="#apiSearchTips" data-placement="bottom">
<span class="icon fw-stack fw-lg add-margin-left-1x" stylZ="font-size:10px">
<i class="fw fw-circle fw-stack-2x"></i>
<i class="fw fw-question fw-stack-1x fw-inverse"></i>
</span>
</a>
<div id="apiSearchTips" class="hide help-popover-content" >
//Popover content
</div>
Code
$('a[rel="popover"]').popover({
container: 'body',
html: true,
trigger:'click',
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
}).click(function(e) {
e.preventDefault();
});
This does not work unless I change the selector attribute to a different one rather than rel="popover". For an example say I change it to data-trigger="popover" and it works. Why does this happen?
I am using jquery owl carousel plugin to dynamically present html page components to the users.
The problem is the Prev/Next navigation and loop not working with dynamically added contents if the Drag triggers are set to false/ disabled.
Here is the codes:
Options
var owlcarousel_obj = {
loop: true,
nav: true,
navContainer: "#cv-navigation",
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: true,
dotsEach: true, */
navText: ['<span id="nav-arrow-left" class="nav-arrow inline-block"><i class="fa fa-chevron-left fa-lg"></i></span>', '<span id="nav-arrow-right" class="nav-arrow inline-block"><i class="fa fa-chevron-right fa-lg"></i></span>'],
nestedItemSelector: "owl-item",
responsive:{
0:{
items:1,
},
320:{
items:2,
},
480:{
items:3,
},
768:{
items:4,
},
1000:{
items:6,
}
}
};
initialize owl carousel
var vartcarousel = $("#cv-contents");
vartcarousel.owlCarousel(owlcarousel_obj);
I added this custom trigger, but still not working
$(".nav-arrow-left").on("click touch", function(){
vartcarousel.trigger("next.owl.carousel");
});
$(".nav-arrow-right").on("click touch", function(){
vartcarousel.trigger("prev.owl.carousel");
});
Load contents dynamically
$(".call-header").on("click touch", function(e){
var comvars = $("#packagename-variations-group").html();
vartcarousel.trigger("add.owl.carousel", comvars).trigger("refresh.owl.carousel");
e.stopImmediatePropagation();
});
HTML
<div id="cv-header" class="d-table">
<span class="cv-header-text pull-left">Test</span>
<span class="cv-close-box"><i class="fa fa-times fa-lg"></i></span>
<div id="cv-navigation" class="pull-right d-tcell"></div>
<div class='clear'></div>
</div>
<div id="cv-contents" class="">
</div>
How to solve this problem?
The owlCarouel object is now linked to the object with the "data" jQuery binder, and uses its own prev / next methods, use it like that :
var varcaroulsedata = varcarousel.data('owlCarousel');
$(".nav-arrow-left").on("click touch", function(){
varcaroulsedata.prev();
});
$(".nav-arrow-right").on("click touch", function(){
varcaroulsedata.next();
});
I would like to know if it is possible to know if my owl-carousel is on the end of the list to disable the next button.
Here is my Javascript:
<script>
$(document).ready(function() {
var owl = $("#owl");
owl.owlCarousel({
items : 5, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0
itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option
});
// Custom Navigation Events
$(".next").click(function(){
owl.trigger('owl.next');
if(owl.)
})
$(".prev").click(function(){
owl.trigger('owl.prev');
})
$(".play").click(function(){
owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter
})
$(".stop").click(function(){
owl.trigger('owl.stop');
})
});
</script>
Here is my HTML:
<div class="col-xs-6">
<div class="row contracts" rv-show="context:contracts | length | gt 1">
<div class="col-sm-12 box box-flex" rv-slide="context:stepHide" style="">
<ul id="owl">
<li class="col-xs-2">987456</li>
<li class="col-xs-2">558745</li>
<li class="col-xs-2">126985</li>
<li class="col-xs-2">598746</li>
<li class="col-xs-2">325478</li>
<li class="col-xs-2">987652</li><li class="col-xs-2">126985</li>
<li class="col-xs-2">598746</li>
<li class="col-xs-2">325478</li>
<li class="col-xs-2">987652</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="customNavigation">
<a class="btn prev">Previous</a>
<a class="btn next">Next</a>
<a class="btn play">Autoplay</a>
<a class="btn stop">Stop</a>
</div>
</div>
</div>
</div>
</div>
So when the last li item is showed, I want to disable next button.
I searched into Owl functions but I didn't find something as I want.
Thank you
You can do this with cominaison of afterAction and currentItem like this
<script>
$(document).ready(function() {
var owl = $("#owl");
owl.owlCarousel({
items : 5, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0
itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option
afterAction: function() {
if(this.owl.currentItem == $(owl).children().length - 1) {
$('.btn .next').hide();
} else {
$('.btn .next').show();
}
},
});
// Custom Navigation Events
$(".next").click(function(){
owl.trigger('owl.next');
if(owl.)
})
$(".prev").click(function(){
owl.trigger('owl.prev');
})
$(".play").click(function(){
owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter
})
$(".stop").click(function(){
owl.trigger('owl.stop');
})
});
</script>
I have developed a bootstrap carousel with a elevateZoom lens inside it. The issue is that when the mouse leaves the image, the lens does not disappear until the mouse leaves the lens too. In the example shown in official elevateZoom web this does not happen(the lens disappear as soon as the mouse leaves the image).
Here is my code:
<div id="planos" class="carousel slide" style="border-top:1px solid #FCF3E8; top:-1px" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" ng-app="planos-module" ng-controller="planos-controller">
<div ng-repeat="i in getNumber(number) track by $index" class="item" id="plano{{$index+1}}">
<img ng-src="img/planos/{{$index+1}}.jpg" alt="Plano {{$index+1}}" data-zoom-image="img/planos/{{$index+1}}.jpg" />
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control carousel-control-2" href="#planos" role="button" data-slide="prev">
<span class="fa fa-angle-left fa-3x" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control carousel-control-2" href="#planos" role="button" data-slide="next">
<span class="fa fa-angle-right fa-3x" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
And the relevant javascript:
$(document).ready(function(){
//some code
$('#plano1').addClass('active');
$('#planos .item img').each(function(){
$(this).elevateZoom({
zoomType : "lens",
lensShape : "round",
lensSize : 350
});
});
//some more code
});
What am I doing wrong?
Thank you very much
EDIT: Here is the JSFiddle. I wasn't able to replicate it exactly as my web, but the same issue is going on. Also, I couldn't import the elevateZoom js file, so I just copy-pasted its content in the js fiddle (if you scroll down in the JS section you can see my code)
EDIT2: SOLVED! The answer is below.
Solved!
Here is the answer, in case anyone else experiences the same issue.
I just had to add containLensZoom: true option to my elevateZoom initialization.
$(document).ready(function(){
//some code
$('#plano1').addClass('active');
$('#planos .item img').each(function(){
$(this).elevateZoom({
zoomType : "lens",
lensShape : "round",
lensSize : 350,
containLensZoom : true
});
});
//some more code
});