We Keep Coding

Making 2 SwiperJS scripts work together - 2nd one not working when other init script is added to same page

Having trouble making 2 swiperJS Sliders work together.
The conflict seems to be in the for each, or the JS column in codepen / the external script file that initializes the slider.
Anyone have any ideas on how i can get them both to work together? For example, if you take the script from the 2nd one, and put it into the script column in slider one you'll see it breaks it. Or, if you do the opposite, it breaks it too.
It doesn't look like it's a matter of them both being called .swiper-container because the 2nd one ID's the swiper with #swiper1
SLIDER 1: Codepen
SLIDER 2: Codepen
The JS that makes this one work is:
(function () {
'use strict';
const mySwiper = new Swiper('#swiper1', {
loop: true,
autoplay: 4000,
slidesPerView: '1',
centeredSlides: true,
a11y: true,
keyboardControl: true,
grabCursor: true,
// pagination
pagination: '.swiper-pagination',
paginationClickable: true,
// navigation arrows
nextButton: '#js-prev1',
prevButton: '#js-next1' });
})();
any help would be appreciated!
If you look at both Codepen's it'd be most helpful i'm thinking.
slider 1 works great and i dont want to mess with that one as it's telling it to show a certain amount of slides per view.

Here is complete working example https://jsfiddle.net/710x569p/ As i told you in another answer don't use same selector and exclude #swiper1 from .swiper-container
var mySwiper = new Swiper('.swiper-container:not(#swiper1)'

Hacking/Overriding Javascript

I'm only familiar with HTML and CSS, which I use on a daily basis. !Important CSS overrides are something I have to do TONS of in order to customize websites for clients that use a 3rd party CRM system, but now I've been asked to see if I can override what a Javascript image slider does; namely if I can force it to let the images rotate out instead of showing a single image that only randomly changes out to other ones when the page refreshes. I'm not familiar enough with Javascript to know how to do this; I've used this same sort of image slider many many times over, so I know what settings need to be changed, but I don't know how to force an override like I do with CSS, or if it's even possible to tack on another on the same page that will do it.
Here's the javascript code snippet that the webpage has on it already.
<script type="text/javascript">
$(document).ready(function () {
var randSlick = Math.floor( Math.random() * $('#carousel > div').length );
$('#carousel').slick({
infinite: true,
autoplay: false,
autoplaySpeed: 10000,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
}).slickGoTo(randSlick);
});
</script>
I need to change the "autoplay" to true, so it will play automatically instead of do nothing, and I'd like to change the "autoplaySpeed" to something more reasonable, like 3000.
I don't have access to this part of the code (Hence why I'm always having to do CSS !Important overrides; I can't just edit the existing code directly, I have to add my own in a sneaky hackery sort or way) so I'm hoping that there's an easy way to do this. My apologies if this is long winded or confusing in any way; I've taught myself HTML and CSS easily enough but Javascript is proving to be another animal entirely and I'm just flailing around at this point.

To get the obvious out of the way:
You will not be able to modify the JavaScript code with HTML/CSS, you can only do so via JavaScript.
What you see in the script is JQuery, a JavaScript extension library: see: JQuery API.
I recommend that you make your own script to reset the values of the $("#carousel") via the unslick function, which is clearly documented here: see: SlickJS.
$("#carousel").slick('unslick');
Immediately after which you can bind $("#carousel") with your own parameters like so:
<script type="text/javascript">
$(document).ready(function () {
var randSlick = Math.floor( Math.random() * $('#carousel > div').length );
$('#carousel').slick({
infinite: true,
autoplay: true,
autoplaySpeed: 3000,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
}).slickGoTo(randSlick);
});
</script>
Make 100% sure that your JavaScript file gets called after the SlickJS import.
Any questions? Ask in the comments below :-)

In your page, you can deconstruct the existing slick object and recreate it with your own settings.
<script type="text/javascript">
$(document).ready(function () {
$('#carousel').slick('unslick'); // Destroy existing slick object
// Start a new one with the options you want
$('#carousel').slick({
autoplay: true,
autoplaySpeed: 3000
});
});
</script>

wordpress jquery 3d plugin not loading

i need help implanting my jquery script in wordpress.
I already linked everything in function.php (wp_enquere_scripts) and i checked it, both js load.
Now i have a problem not displaying what i would like to and I have no idea why...is it possible that my source-link is wrong?
here the code (its a 3d model viewer with images)
<div class="wpb_wrapper">
<script type="text/javascript"> $('.wpb_wrapper').spritespin({
source: SpriteSpin.sourceArray('/img/rad_zoom_{frame}.jpg', { frame: [1,34], digits: 3}),
width: 1100,
height: 770,
sense: -1,
mods: ['move', 'zoom', '360'],
autostart: false,
behavior: null,
module: null
});
here the link of the official plugin:
http://www.jqueryscript.net/other/Versatile-jQuery-Product-Image-Viewer-Plugin-SpriteSpin.html
maybe you guys know a better way putting this onto a wordpress-site
thanks

Load flexslider in easytabs

I am trying to load flexslider in easytabs. I have two flexsliders on the page. One in under photos which loads with the page and the other is under Features. The flexslider on the Features tab will not load because it is initially hidden.
I am looking for some js code to execute the second flexslider when the tab is clicked.
Any help is appreciated
Note: I have already made adjustments and confirmed that both flexsliders work on the page without tabs.
I went with pikachoose instead of flexslider and it worked.

I found this worked for what I wanted to do.
$(document).ready(function(){
$('.flexslider').flexslider({
animation: 'slide',
animationLoop: false,
prevText: '',
nextText: '',
controlNav: false,
keyboard: false,
slideshow: false,
start: function(){
// This is your easytabs install
$('.tab-container').easytabs({
updateHash: false,
animate: false
});
}
});
});
Basically it only initialises easytabs when flexslider is done.

CloudZoom with Fancybox

I'm a little new to javascript as I mostly just fool around with CSS styling when developing web pages.
I ran into a problem trying to integrate Fancybox with Cloudzoom. I've been trying to follow the directions as directed here: http://blog.codestars.eu/2010/cloud-zoom-in-der-fancybox/
I'm able to get the effect to work perfectly except for one small error-- for some reason (all my images are in galleries for easier use scrolling through fancybox), the zoom only ever shows the first image in the series.
If someone could help me sort through this? Preview any of the galleries here: http://bit.ly/LaPzEH
Here's the tidbit I think is just slightly off - I think it has something to do with the href line in this code being off:
$j('a[rel=gallery]').fancybox({
padding: 0,
overlayColor: '#'+$j('#skin_color').val(),
transitionIn: 'fade',
transitionOut: 'fade',
overlayOpacity: .9,
onComplete : function(arg) {
$('#fancybox-img').wrap(
$('<a>')
.attr('href', $(arg[0]).attr('href'))
.addClass('cloud-zoom')
.attr('rel', "position: 'inside'")
);
$('.cloud-zoom').CloudZoom();
}
});
Any an all help is greatly appreciated!
Edit: Got it working by changing
$(arg[0]).attr('href')
to
this.href
As an aside (because I couldn't find many cloudzoom/fancybox threads) you can also change the position from inside to right/left etc. by editing the JS code for fancybox to have the fancybox-inner display as visible rather than hidden.

If the idea is to wrap the #fancybox-img selector with an anchor with class="cloud-zoom" and with the same href attribute of the anchor that opened fancybox like
<a href="{same as anchor}" class="cloud-zoom" rel="position: 'inside'">
<img id="fancybox-img" src="{big image}" alt=" " />
</a>
... so Cloud Zoom can work on the specific image, then I would re-write the onComplete callback like :
'onComplete' : function(){
$('#fancybox-img').wrap(
$('<a />')
.attr('href', this.href) // this.href gets the "href" of the current image
.addClass('cloud-zoom')
.attr('rel', "position: 'inside'")
); // wrap
$('.cloud-zoom').CloudZoom();
} // onComplete
(not idea what the heck onComplete : function(arg) would do but in any case it would be better to use 'onComplete' : function(currentArray, currentIndex) for the sake of standard fancybox code)
SIDE NOTES:
You are loading two versions of jQuery (1.4.2 and 1.7.1) when you actually need a single instance (ideally the latest version) to avoid unexpected errors.
You are using fancybox v1.3.0 ... it wouldn't hurt to upgrade at least to v1.3.4
Set all your fancybox API options between quotes like
"padding": 0, // it's OK 0 without quotes (integer and Boolean values go without them)
"overlayColor": '#'+$j('#skin_color').val(),
"transitionIn": 'fade',
"transitionOut": 'fade',
"overlayOpacity": .9,
"onComplete": ...etc
there are known issues (mostly with IE) because that (fancybox v1.3.x)