I am trying to make the elements in my Owl carousel draggable but it doesn't seem to be working. Here is my set up:
HTML:
<div id="owl" class="owl-carousel">
<div class="my-owl-item"></div>
<div class="my-owl-item"></div>
<div class="my-owl-item"></div>
</div>
JS / jQuery:
jQuery(function(){
//init carousel
$(".owl-carousel").owlCarousel({
autoPlay:false,
rewindSpeed:500,
navigation:false,
pagination:false,
slideSpeed:1500,
mouseDrag:false
});
//set up draggable
jQuery( '.my-owl-item' ).draggable({
start: function( event, ui ) {console.log('dragging');},
helper : 'clone'
});
});
I have disabled mouse dragging for the carousel because I though this might be the cause. The draggable start function is being fired - it outputs the debug message to the console as expected. The element is also being cloned too. So all seems to work except I can't drag it!
Any help much appreciated.
For this you need to edit the owl-carousel.js file to work perfectly with the draggable event because in owl-carousel.js by default it is only draggable in x direction. as i edited the js file so you can achieve the functionality you are looking for.
Here is the link to the Edited js file
https://www.dropbox.com/s/2lia6kkeimka94o/owl.carousel.js
and in you jquery where you are initializing the Owl-carasoul , Just remove the mouseDrag event.and also place the jquery ui at the end of the body tag. h
Here is my configuration
<script>
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
// Define custom and unlimited items depending from the width
// If this option is set, itemsDeskop, itemsDesktopSmall, itemsTablet, itemsMobile etc. are disabled
// For better preview, order the arrays by screen size, but it's not mandatory
// Don't forget to include the lowest available screen size, otherwise it will take the default one for screens lower than lowest available.
// In the example there is dimension with 0 with which cover screens between 0 and 450px
itemsCustom : [
[0, 2],
[450, 4],
[600, 7],
[700, 9],
[1000, 10],
[1200, 12],
[1400, 13],
[1600, 15]
],
navigation : true
});
});
</script>
and
<script>
jQuery( '.item' ).draggable({
start: function( event, ui ) {console.log('dragging');}
});
</script>
and for the head tag
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
and the html markup is
<div id="demo">
<div id="owl-demo" class="owl-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
<div class="item"><h1>13</h1></div>
<div class="item"><h1>14</h1></div>
<div class="item"><h1>15</h1></div>
<div class="item"><h1>16</h1></div>
<div class="item"><h1>17</h1></div>
<div class="item"><h1>18</h1></div>
<div class="item"><h1>19</h1></div>
<div class="item"><h1>20</h1></div>
</div>
</div>
Related
I am working on a website and there seems to be conflicting elements.
I started with a template that contains a lot of "borrowed" CSS and JS elements from different places, and now I am trying to add a Slick slideshow, and there are conflicts in either the JS or the CSS that prevent me from editing the Slick slider (parts of the slick-slider code were already present in the "Organic Farm" template).
Right now I have js/core.min.js, js/script.js and js/slick.js being loaded into the page, and then at the bottom of the index page:
<script type="text/javascript">
$(document).ready(function(){
$('.swiper-slide').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
});
});
</script>
The HTML portion is:
<section class="section">
<div class="swiper-container swiper-slider swiper-custom" data-height="35.10416666666667%" data-min-height="375px" data-index-bullet="false" data-slide-effect="swipe" data-autoplay="5000">
<div class="swiper-wrapper swiper-wrapper-custom">
<div class="swiper-slide" data-slide-bg="images/ergfer1.jpg">
<div class="swiper-slide-caption">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-9 col-lg-8 top">
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" data-slide-bg="images/gdrger.jpg">
<div class="swiper-slide-caption">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-9 col-lg-8 top">
</div>
</div>
</div>
</div>
</div>
Is there a way to find out why my custom script is not active? The arrows are also not showing up. For anything HTML and CSS I use the Inspector of Firefox, but here I'm really stumped.
Two things to consider:
1) When using slick.js, it is customary to add it to the element which is the parent of a set of elements which are then converted into slides. For example:
<div id="slide-wrapper">
<div class="my-slide">...</div>
<div class="my-slide">...</div>
<div class="my-slide">...</div>
</div>
$('.slide-wrapper').slick({
...
});
In your case, that would mean adding Slick to swiper-wrapper:
$('.swiper-wrapper').slick({
...
});
2) More likely the problem is that you have a conflict with the setup of a different slide show library altogether, Swiper.js (https://swiperjs.com/api/), which uses classes like swiper-container, swiper-wrapper and swiper-slide. To implement that slideshow, you would have to include that library on your page and initialize the slideshow with something like:
var mySwiper = new Swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});
I'm using fullpagejs and AOS to make some divs popping up from the bottom of the page on scroll (or at least that's what I'd like to achieve).
Unfortunately, it is not working.
Yes, I've read the FAQ sections of fullpage and yes, scrollbar is set to true and autoscroll is set to false.
My setup is the following:
<div class="section" id="test">
<div class="slide">
<div class="section">
{someOtherContent}
<!-- div i want to animate is down below -->
<div data-aos="slide-up">test</div>
</div>
</div>
<div class="slide"></div>
<div class="slide"></div>
</div>
$('#test').fullpage({
lazyLoading: false,
lockAnchors: true,
scrollingSpeed: 300,
fitToSection: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopHorizontal: false,
offsetSections: false,
resetSliders: false,
scrollOverflow: true,
scrollOverflowReset: true,
touchSensitivity: 0,
bigSectionsDestination: top,
keyboardScrolling: false,
animateAnchor: false,
recordHistory: true,
controlArrows: false,
verticalCentered: true,
responsiveWidth: 0,
responsiveHeight: 0,
sectionSelector: '.section',
slideSelector: '.slide',
scrollBar:true
//events
afterLoad: function (anchor, index( {
initArrowEventListener()
}
the afterLoad event function simply initialises my menu links (based on the slide index) and the only relevant part is that I initialise AOS when I click on one specific link (as I want the library to work only on a specific page and not everywhere.
So, I load the page, click to navigate on the slider page I want, the function is called (console log proofs it, as well as AOS classes are applied to the relevant div), I can see the scrollbar, but nothing, the div is not popping up from the bottom.
Any idea what am I doing wrong here?
There used to be this pen illustrating the same problem. Click on "About" (the function that initialises AOS is called as the one for the title works as well), scroll to the bottom and you will see a lot of white space. If you inspect the console, AOS is initialised on the element (its classes are applied) but the element never slides up)
Use only the css part of AOS and hook up aos-animate on fullpage.js callbacks.
Add the AOS body data manually
<body data-aos-easing="ease" data-aos-duration="1000" data-aos-delay="0">
Add the aos-init class
$('[data-aos]').each(function(){ $(this).addClass("aos-init"); });
Toggle the aos-animate class with fullpage.js callbacks
$('#fullpage').fullpage({
slidesNavigation: true,
controlArrows: false,
onLeave: function(){
$('.section [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
onSlideLeave: function(){
$('.slide [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
afterSlideLoad: function(){
$('.slide.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
},
afterLoad: function(){
$('.section.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
}});
Example HTML
<div id="fullpage">
<div class="section" id="section0">
<div class="intro">
<div data-aos="fade-up">
<h1>fade me up!</h1>
</div>
</div>
</div>
<div class="section" id="section1">
<div class="slide">
<div class="intro">
<div data-aos="zoom-in">
<h1>zoom me in!</h1>
</div>
</div>
</div>
<div class="slide">
<div class="intro">
<div data-aos="flip-down">
<h1>flip me down!</h1>
</div>
</div>
</div>
</div>
I'm using Jssor slider, and in one of the slide I've put a calendar with fullCalendar.
My problem comes when I drag an calendar event to move it to another date, because in addition to moving the event, the slider acts and is changed to another slider window.
Can I stop the action of the slider when I detect the drag start event?
Any other way to do it?
Code HTML (jssor slider + FullCalendar):
<div id="slider1_container" class="green-background">
<!-- Slides Container -->
<div u="slides" style="cursor: move;">
<div id="first-slide" class="green-background">
<div class="row">
<div class="col-md-1" style="padding-right: 1em;">
...
</div>
<div class="col-md-11">
<div id='calendar'></div>
</div>
</div>
</div>
<div id="second-slide" class="green-background"></div>
<div id="third-slide" class="green-background"></div>
</div>
</div>
JS code to jssor slider:
var options = { $AutoPlay: false };
jssor_slider1 = new $JssorSlider$('slider1_container', options);
JS code to fullCalendar:
var hoy = new Date();
$('#calendar').fullCalendar({
contentHeight: 380,
header:false,
fixedWeekCount: false,
events: [
{id:2 , title: 'New event1', start: '2017-02-15'}
],
editable: true,
defaultDate: hoy,
selectable: true,
eventDragStart: function( event, jsEvent, ui, view ) {
// Code to stop slide
}
})
Add attribute 'data-nodrag' to prevent dragging on an element.
<div data-nodrag="true" ...>
Edit
<div class="col-md-11">
<div data-nodrag="true" id='calendar'></div>
</div>
I'm using the excellent slider OWL Carousel 2. http://www.owlcarousel.owlgraphic.com/
My issue is the URLhashListener option only allows you to create a link to a specific slide but does not allow the user to copy the url link from the current slide to share. I would assume the correct behaviour of this option would be the URL updates as the user moves to the next slide so they can then copy that unique URL.
http://www.owlcarousel.owlgraphic.com/demos/urlhashnav.html
My OWL code:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var owl = $(".owl-carousel");
owl.owlCarousel({
smartSpeed:1500,
items:1,
lazyLoad:true,
loop:true,
URLhashListener:true,
startPosition: 'URLhash',
nav: true,
});
});
//]]>
</script>
I'm using data-hash in my image tag to generate the hash id for each image which works fine (you can link to the specific slide). But when you click next and arrive at the next slide the URL will remain as #HASHID. The link no longer corresponds to the current slide.
<img id="zm" class="owl-lazy owlimg" data-hash="slideID" data-src="myimagelink.jpg">
Here's a live page with the url hash nav working:
http://www.legacyart.pinkpoliceman.com/collections/birds-of-prey/
With hash:
http://www.legacyart.pinkpoliceman.com/collections/birds-of-prey/#slide14
I'm sure these docs hold part of the answer but I'm not sure how to piece it all together. http://www.owlcarousel.owlgraphic.com/docs/api-events.html
Update (Native solution)
It seems that once you add data-hash to your items, the plugin take care about all the functionality.
http://jsbin.com/javuwod/edit?html,js
Original Answer
You can easily "listen" to slide changed event using changed.owl.carousel, then you can change the hash according the slide's index.
var owl = $('.owl-carousel');
owl.owlCarousel({
margin:10,
nav:true,
URLhashListener: true,
startPosition: 'URLHash'
});
// Listen to owl events:
owl.on('changed.owl.carousel', function(event) {
location.hash = 'slide' + event.property.value;
})
<link href="http://www.owlcarousel.owlgraphic.com/assets/css/docs.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.js"></script>
<div id="demos">
<div class="owl-carousel">
<div class="item" data-hash="slide0">
<h4>1</h4>
</div>
<div class="item" data-hash="slide1">
<h4>2</h4>
</div>
<div class="item" data-hash="slide2">
<h4>3</h4>
</div>
<div class="item" data-hash="slide3">
<h4>4</h4>
</div>
<div class="item" data-hash="slide4">
<h4>5</h4>
</div>
<div class="item" data-hash="slide5">
<h4>6</h4>
</div>
<div class="item" data-hash="slide6">
<h4>7</h4>
</div>
<div class="item" data-hash="slide7">
<h4>8</h4>
</div>
<div class="item" data-hash="slide8">
<h4>9</h4>
</div>
<div class="item" data-hash="slide9">
<h4>10</h4>
</div>
<div class="item" data-hash="slide10">
<h4>11</h4>
</div>
<div class="item" data-hash="slide11">
<h4>12</h4>
</div>
</div>
</div>
http://jsbin.com/javuwod/edit?html,js
I'm trying to use a carousel thumbnails for my items, however the items are generated by another script, I'm trying to load the plugin for carousel but he can not identify the items.
My Real HTML:
<div class="prerecord_main">
<div id="merch">
</div>
</div>
after prepend by another script:
<div class="prerecord_main">
<div id="merch">
<div class="product-container"></div>
<div class="product-container"></div>
<div class="product-container"></div>
<div class="product-container"></div>
<div class="product-container"></div>
</div>
</div>
My jQuery Plugin
$(document).ready(function(){
var owl = $(".prerecord_main #merch");
owl.owlCarousel({
items : 5
});
});
does not work because it can not read the items "product-container"