I am just using headjs for my website but the problem is the files are loaded, but they doesnt execute.
Here is my code in the
<script type="text/javascript" src="js/head.js"></script>
<script>
head.js(
"js/jquery.js",
"js/fadetext.js",
"//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js",
"css/slider/responsiveslides.min.js"
);
</script>
My slideshow is not working for which i used jquery/1.8.3/jquery.min.js rest all scripts i working??? should I also use headjs for inline js like dis
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 1
$("#slider1").responsiveSlides({
auto: true,
pager: true,
nav: true,
speed: 600,
maxwidth: 1920,
namespace: "centered-btns"
});
// Slideshow 2
$("#slider2").responsiveSlides({
auto: true,
pager: true,
nav: true,
speed: 600,
maxwidth: 1920,
namespace: "transparent-btns"
});
// Slideshow 3
$("#slider3").responsiveSlides({
auto: true,
pager: false,
nav: true,
speed: 600,
maxwidth: 1920,
namespace: "large-btns"
});
});
</script>
You should be calling a callback after the resources have finished loading
<script type="text/javascript" src="js/head.js"></script>
<script>
function initSliders() {
// Slideshow 1
$("#slider1").responsiveSlides({
auto: true,
pager: true,
nav: true,
speed: 600,
maxwidth: 1920,
namespace: "centered-btns"
});
// Slideshow 2
$("#slider2").responsiveSlides({
auto: true,
pager: true,
nav: true,
speed: 600,
maxwidth: 1920,
namespace: "transparent-btns"
});
// Slideshow 3
$("#slider3").responsiveSlides({
auto: true,
pager: false,
nav: true,
speed: 600,
maxwidth: 1920,
namespace: "large-btns"
});
}
head.js(
"js/jquery.js",
"js/fadetext.js",
"//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js",
"css/slider/responsiveslides.min.js",
initSliders
);
</script>
Related
Hey I'm using swipper js to build a vertical slider!
The Intended Solution:
-> When building the slider , i want to release the mouse scroll as soon it reaches the first or last slide.
The Problems:
-> Sometimes it makes the page scroll and the slider at the same time (happened only a few times) when i lowered the swiper version to 4.5.1
-> Main problem happened when i was working with version 5.3.1, when reaching the first or last slide, it scrolled too suddently, and the transition wasn't smooth which caused some usability problems...
<script src="https://unpkg.com/swiper#5.3.1/js/swiper.min.js"></script>
Code:
Version 4.5.1
let productSwiper = new Swiper(".swiper-container--product", {
direction: "vertical",
loop: false,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
grabCursor: true,
speed: 1000,
paginationClickable: true,
parallax: true,
autoplay: false,
effect: "slide",
centerMode: false,
mousewheel: true,
loopFillGroupWithBlank: false,
slidesPerView: 'auto',
touchReleaseOnEdges:true
});
productSwiper.swiper;
Version 5.3.1
let productSwiper = new Swiper(".swiper-container--product", {
direction: "vertical",
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
grabCursor: true,
speed: 1000,
parallax: true,
autoplay: false,
effect: "slide",
centerMode: false,
mousewheelSensitivity: 1,
mousewheel: {
releaseOnEdges: true,
},
loopFillGroupWithBlank: false,
slidesPerView: 'auto',
Note: I removed the release on edges atribute on the 4.5.1 version, because currently it was causing that bug.
Sorry for the long post , thanks in advance!
I use Slick slider. I need to set the delay before changing slide, how can I realize this task?
Here is slider's JS-code:
$(".intro__slider").slick({
infinite: true,
dots: true,
dotsClass: "intro__dots",
arrows: false,
swipe: false,
draggable: false
});
var introTitle = $(".intro__title"),
introSlide = $(".intro__slide");
$(".intro__slider").on("beforeChange", function () {
introTitle.addClass("intro__title_hidden");
introSlide.addClass("intro__slide_overlayed");
});
$(".intro__slider").on("afterChange", function () {
introTitle.removeClass("intro__title_hidden");
introSlide.removeClass("intro__slide_overlayed");
});
Here is full code on codepen
try this:
// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
setTimeout(function() {
//your code to be executed after 1 second
}, 1000);
});
You can use autoplaySpeed: 3000, in slick options
$(".intro__slider").slick({
autoplaySpeed: 3000,
infinite: true,
dots: true,
dotsClass: "intro__dots",
arrows: false,
swipe: false,
draggable: false
});
you can use speed to 3000
$(".intro__slider").slick({
infinite: true,
autoplay: true,
autoplaySpeed: 6000,
dots: true,
dotsClass: "intro__dots",
arrows: false,
speed:3000
});
will make the transition in 3 sec, but it won't make a delay, to use a delay I would recommend to use your own dots buttons and the methods slickGoTo , slickNext
I am trying to make autoplay work on a simple SlidesJS carousel:
http://www.cycle22x.com/
I checked out some other threads that answer similar problems but the solutions provided aren't working? Here is the script that is included in the file:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="/scripts/jquery.slides.min.js"></script>
<script>
$(function()
{
$('#slides').slidesjs(
{
play: 1000,
pause: 10,
hoverPause: true,
width: 960,
height: 540,
navigation:
{
effect: "fade"
},
pagination:
{
effect: "fade"
},
effect:
{
fade:
{
speed: 400
}
}
});
});
</script>
Any thoughts or ideas would be greatly appreciated.
you need to use auto: true to make it autoplay, like:
...
$('#slides').slidesjs({
width: 940,
height: 528,
play: {
active: true,
auto: true,
interval: 4000,
swap: true,
pauseOnHover: true,
restartDelay: 2500
}
});
See here:: Example Autoplay
I'm using slidesjs and I want make multi sliders
I have 2 sliders #show and #show2, and I want that 2 slidersw work in 1 time: slides will be change in one time.
Now now 1 slider slides change earlier than 2, what is wrong in my code ?
I want that slides will change in one time:
<script>
$(function(){
$("#show").slidesjs({
width: 900,
height: 300,
navigation: false,
pagination: {active: false},
play: {
auto: true,
pauseOnHover: true,
effect: "fade",
},
effect: {
slide: {
speed: 200
},
fade: {
speed: 300,
crossfade: true
}
}
});
$("#show2").slidesjs({
width: 900,
height: 300,
navigation: false,
pagination: {active: false},
play: {
auto: true,
pauseOnHover: true,
effect: "fade",
},
effect: {
slide: {
speed: 200
},
fade: {
speed: 300,
crossfade: true
}
}
});
});
</script>
I try .ready but slides also change in different time
Give them both a class, and target them at the same time.
<div class="sliders" id="show"></div>
<div class="sliders" id="show2"></div>
JS:
$(".sliders").slidesjs({ ... });
I have two jquery/javascript codes but I couldn't merge them. Everytime one of the functions was disable. How can I merge the codes. Please help me, thanks.
First file:
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});
jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});
//first ready function
jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
});
second file:
function checkCopyRight(/*string*/url){
var copyrightLinks = $("a[href='" + url + "']");
return copyrightLinks.length > 0;
}
// second ready function
$().ready(function(){
if(!(checkCopyRight("http://e1.com")&&
checkCopyRight("http://e2.com")&&
checkCopyRight("http://e3.com"))){
alert("...");
}
});
I get a "Your post does not have much context to explain the code sections; please explain your scenario more clearly." message. There any character limit?
You actually have 3 Ready functions and one wannabe ready function. I've rewritten your code as it should be in one ready call. Give it a try:
function checkCopyRight(/*string*/url){
var copyrightLinks = jQuery("a[href='" + url + "']");
return copyrightLinks.length > 0;
}
jQuery.noConflict();
jQuery(function() {
jQuery('.menu-primary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
jQuery('.menu-secondary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
if(!(checkCopyRight("http://e1.com") && checkCopyRight("http://e2.com") && checkCopyRight("http://e3.com"))) {
alert("...");
}
})
$().ready(handler) (this is not recommended) [1]
Also, keep in mind, You dont really need noConflict unless you are using another JavaScript Library like MooTools or Prototype. A Plugin like Superfish is not relly a reason to call no Conflict. If there is no conflict, you can use $ as shorthand for jQuery instead of constantly rewriting jQuery.
$(document).ready is the same as JavaScript's .load function and since jQuery 1.0 you can use the shorthand version jQuery(function() { /* do work */ }) or $(function() { /* do work */ })
For more information:
.ready() (also info on noConflict)
.noConflict() (API Page)
My Blog on using jQuery (needs work, hoping to edit it this weekend, sorry)
jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
if(!(checkCopyRight("http://e1.com")&&
checkCopyRight("http://e2.com")&&
checkCopyRight("http://e3.com"))){
alert("...");
}
});
You need to import the second file first since the first file uses a function inside second file.