We Keep Coding

Release on Edges Scroll is not smooth

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!

Get current image data Flexslider

Is it possible to extract data from the current Flexslider image, like image ID, URL and name? I need to print the current image URL outside the flexslider div.
The code I'm using now:
jQuery('#slider').flexslider({
animation: "fade",
animationSpeed: 0,
controlNav: false,
animationLoop: false,
smoothHeight: true,
slideshow: false,
keyboard: true,
touch: true,
directionNav: true
});
Many thanks in advance

You can use the after trigger which triggers after the slide changes:
jQuery('#slider').flexslider({
after: function { // Code that fetches the needed data goes here },
animation: "fade",
animationSpeed: 0,
controlNav: false,
animationLoop: false,
smoothHeight: true,
slideshow: false,
keyboard: true,
touch: true,
directionNav: true
});
A functioning demo is found here: Jsfiddle

How to set default tab for initial load

Currently this webpage opens to the tab, "Freebies & Extras." I want it to open to the first tab, "Commonwealth & Council." I believe, by default, it will open to the first tab. I tried to locate where it is telling the browser to open it on the third tab but couldn't find it.

I think this is the code you are looking for:
$('div#Panels').tabs({
active: 2,
The active option tells the tab control which tab to display.
If you change the active value to 0 (or remove it altogether), it should display the first tab on page load.
Since the activtate event is not triggered for the initially displayed tab, you could move the code from the activate event handler into a separate function, and then call that function both in the activate event handler and when the page first loads.
<script>
$(document).ready(function() {
function activateTab(index) {
switch (index) {
case 0:
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 80,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: "#carousel"
});
//-----------------
$(window).resize();
//-----------------
break;
case 1:
$('#carousel2').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 80,
itemMargin: 5,
asNavFor: '#slider2'
});
$('#slider2').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: "#carousel2"
});
//-----------------
$(window).resize();
//-----------------
break;
}
}
$('div#Panels').tabs({
active: 0,
collapsible: false,
activate: function(event, ui) {
activateTab(ui.newPanel.index());
}
});
activateTab(0);
});
</script>

You need to set the active to 0 in the code
$(document).ready(function() {
$('div#Panels').tabs({
active: 2,
collapsible: false,
activate: function(event, ui) {...
UPDATE
When you click the tab 0, then the page runs this code:
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 80,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: "#carousel"
});
//-----------------
$(window).resize();
//-----------------
Since you are not clicking this tab to start, this code is not running when the tab opens. You need to run the code by yourself. I suggest create a function and call it right after defining the tabs.
The full script would be (maybe something is misplaced, because I haven't run it):
function ClickedTab(carousel, slider){
$(carousel).flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 80,
itemMargin: 5,
asNavFor: slider
});
$(slider).flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: carousel
});
//-----------------
$(window).resize();
//-----------------
}
$(document).ready(function() {
$('div#Panels').tabs({
active: 0,
collapsible: false,
activate: function(event, ui) {
switch (ui.newPanel.index()) {
case 0:
ClickedTab("#carousel", "#slider"); break;
case 1:
ClickedTab("#carousel2","#slider2"); break;
}
}
});
ClickedTab("#carousel", "#slider")
})

How to use multiple flexslider in different events

I am using two flexsliders on same page but in different events. Both flexsliders works fine. But second slider has some jerk for first time when the click event triggers.
$('#slider').flexslider({
animation: "slide",
easing: "swing",
direction: "horizontal",
controlNav: true,
asNavFor: '#slider2',
directionNav: true
});
$('.HowItWorks').click(function(){
$('#slider2').flexslider({
animation: "slide",
easing: "swing",
direction: "horizontal",
controlNav: true,
directionNav: true ,
sync: "#slider"
});
})

Javascript slider jquery

<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
controlNav: false,
animation: "fade",
startAt: 0,
slideshow: true,
slideshowSpeed: 7000,
});
});
</script>
Why doesn't my slider work? I copy pasted it from an other script so I am clueless where to start.

Delete the comma after slideshowSpeed: 7000, and you are good to go ;)