I have a question about my slideshow, i want it to play automatically, how to do it???
i've already changed the autoplay setting from false to true, but still cant.
here is my code:
<script>
jQuery(document).ready(function($) {
$('#full-width-slider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: true,
autoScaleSliderWidth: 960,
autoScaleSliderHeight: 350,
controlNavigation: 'bullets',
thumbsFitInViewport: false,
navigateByClick: true,
startSlideId: 0,
autoPlay: true,
transitionType:'move',
globalCaption: true
});
});
</script>
and here is my link if you need to read the jquery file
My Slider problem link
THANKS
Try this,
autoPlay: {
enabled: true,
delay: 1500
}
Change the delay according to your requirement.
Or just try,
autoPlay : {
enabled : true
}
AutoPlay property requires an object not true\flase value, look at doc
Try this code:
<script>
jQuery(document).ready(function($) {
$('#full-width-slider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: true,
autoScaleSliderWidth: 960,
autoScaleSliderHeight: 350,
controlNavigation: 'bullets',
thumbsFitInViewport: false,
navigateByClick: true,
startSlideId: 0,
autoPlay: {
// autoplay options go gere
enabled: true,
pauseOnHover: true
}
});
});
Edit: "}" was missing after " pauseOnHover: true" .
Related
I have launched a website but I can't figure out why the carousels don't load up correctly each time the site is visited and it sometimes requires reloading it multiple times - The images have all been downsized for web and I don't know how to fix it,
http://alexburger.co/Graphic.html
https://codepen.io/glittergirl/pen/pZwaaQ
$(window).load(function() {
"use strict";
$('.main-carousel').flickity({
cellAlign: 'left',
contain: true,
wrapAround: true,
imagesLoaded: true,
autoPlay: true,
bgLazyLoad: 1
// adaptiveHeight: true
});
$('.main-carousel2').flickity({
cellAlign: 'left',
contain: true,
wrapAround: true,
imagesLoaded: true,
autoPlay: true,
bgLazyLoad: 1
// adaptiveHeight: true
});
});
i have following code:
$(".owl-carousel").owlCarousel({
autoplay: false,
center: true,
loop: true,
nav: false,
dots: false,
items: 1,
stagePadding: 140,
callbacks: true
});
}
which works fine - as expected. But when i try to do something like this:
var onResize = function() {
$(".owl-carousel").owlCarousel({
autoplay: false,
center: true,
loop: true,
nav: false,
dots: false,
items: 1,
stagePadding: 140,
});
}
$(window).resize(function() {
onResize();
});
then it just ignores the options. Dots are visible etc. Everything looks like it is with default options. Can somebody please help me with this?
Thanks
The resize function isn’t better! Besides, it makes no difference to your load to use media queries to show or hide. You should try it. Keep it simple.
I got codes for thumbnail slider from menu cool but the slider won't stop at a point where it ends, it is infinite.You can find here. Please help.
If you will change showMode setting to 1, then it will not be stuck in infinite scroll
var thumbnailSliderOptions =
{
sliderId: "thumbnail-slider",
orientation: "horizontal",
thumbWidth: "300px",
thumbHeight: "150px",
showMode: 1, // earlier this was set to 3 change it to 1
infiniteSlides: false,
stopAtEnd: true,
autoAdvance: false,
selectable: true,
slideInterval: 3000,
transitionSpeed: 1000,
shuffle: false,
startSlideIndex: 0, //0-based
pauseOnHover: true,
initSliderByCallingInitFunc: false,
rightGap: "default",
keyboardNav: true,
mousewheelNav: true,
before: null,
license: "b2e98"
};
I would like a little help here. I have two jquery sliders but i would like them to run at the same time. Is it possible?
Here is my code :
$(function () {
$('#slider').camera({
autoAdvance: true,
height: 'auto',
loader: 'none',
navigation: false,
pagination: false,
thumbnails: false,
fx: 'scrollHorz',
time: 3000,
playPause: false
});
$('#slider_small').camera({
autoAdvance: true,
height: 'auto',
loader: 'none',
navigation: false,
pagination: false,
thumbnails: false,
fx: 'scrollHorz',
time: 3000,
playPause: false
});
});
with the above code the second start after some milliseconds. I would appreciate if someone can fix it.
As those options are identical, I'd think
$("#slider, #slider_small").camera({
/* ...options here... */
});
would do it. Properly-designed jQuery plugins understand they're working on sets of elements.
$(function () {
$('#slider, #slider_small').camera({
autoAdvance: true,
height: 'auto',
loader: 'none',
navigation: false,
pagination: false,
thumbnails: false,
fx: 'scrollHorz',
time: 3000,
playPause: false
});
});
most standard JQuery plugins knows to accepts an array of elements, and with , in the selector you can select multiple elements.
p.s. the plugin most probably will use for-each so what's the real problem here? if its just jumping then maybe your solution is css?
This is my JavaScript file code and I want to comment some html tag please suggest me how can I Comment to this html code.
This is sample code of JavaScript I want to comment One div
I have tried //, i have tried <\!--..--> i have tried /\*..*/ and it does not work.
(function ($) {
$.prettyPhoto = {
version: '3.1.2'
};
$.fn.prettyPhoto = function (pp_settings) {
pp_settings = jQuery.extend({
animation_speed: 'fast',
slideshow: 5000,
autoplay_slideshow: false,
opacity: 0.80,
show_title: true,
allow_resize: true,
default_width: 500,
default_height: 344,
counter_separator_label: '/',
theme: 'pp_default',
horizontal_padding: 20,
hideflash: false,
wmode: 'opaque',
autoplay: true,
modal: false,
deeplinking: true,
overlay_gallery: true,
keyboard_shortcuts: true,
changepicturecallback: function () {},
callback: function () {},
ie6_fallback: true,
markup: '<div class="pp_pic_holder"><div class="ppt"> </div><div class="pp_top"><div class="pp_left"></div><div class="pp_middle"></div><div class="pp_right"></div></div><div class="pp_content_container"><div class="pp_left"><div class="pp_right"><div class="pp_content"><div class="pp_loaderIcon"></div><div class="pp_fade">Expand<div class="pp_hoverContainer"><a class="pp_next" href="#">next</a><a class="pp_previous" href="#">previous</a></div><div id="pp_full_res"></div><div class="pp_details"><div class="pp_nav">Previous<p class="currentTextHolder">0/0</p>Next</div><p class="pp_description"></p>{pp_social}<a class="pp_close" href="#">Close</a></div></div></div></div></div></div><div class="pp_bottom"><div class="pp_left"></div><div class="pp_middle"></div><div class="pp_right"></div></div></div>*
For Div Tag you have to use <\!-- Div and Content --\>
Like this:
<!--
<\!--<div> Content </div> --\>
-->