Dragging ability stops on resize to smaller window

[lindsayt...@gmail.com]

The issue that I'm having is related to when I resize the window from a desktop-sized viewport to a smaller window (under 600px or so). The dragging functionality of the slider appears get stuck and won't go past a certain point to put the last 1-2 navigation items in view. I'm not seeing the problem when starting out with a smaller viewport or when I view the page on a mobile device, just on resize past a certain point.

Here's my current fiddle that has sly implemented with my navigation setup.

http://jsfiddle.net/linzerlion/24xy4rsf/56/

I've also provided a short video to show the issue when resizing from a larger viewport to a smaller one where the dragging doesn't happen.

https://cl.ly/3n422f2a0r3a

If anyone has insight into what might be causing the issue, I'm all ears! Also, please let me know if there's any additional information I can provide that would help make this issue clearer.

Much thanks!

[lindsayt...@gmail.com]

And it looks like it was just a reload issue - I hadn't called it and adding $(window).on('resize', function () { $frame.sly('reload'); }); after it was initialized. Hope that can help someone else down the line!

[정유진]

<script>

$(window).on('resize', function () { $frame.sly('reload'); });

</script>


If I put this part at the bottom of the page   I get an error like (index):546 Uncaught ReferenceError: $frame is not defined

If I put this part at the horizontal.js 

(function () {
var $frame = $('#basic');
var $slidee = $frame.children('ul').eq(0);
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 3,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
pagesBar: $wrap.find('.pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,

// Buttons
forward: $wrap.find('.forward'),
backward: $wrap.find('.backward'),
prev: $wrap.find('.prev'),
next: $wrap.find('.next'),
prevPage: $wrap.find('.prevPage'),
nextPage: $wrap.find('.nextPage')
});

$(window).on('resize', function () { $frame.sly('reload'); });

This doesn't work if I put it at the bottom of the page


I don't know where to put it so that it reloads to fit the page size.

please help me

2017년 1월 24일 화요일 오전 9시 19분 32초 UTC+9에 lindsayt...@gmail.com님이 작성: