javascript - jQuery carousel navigation breaking on resize -
i made post carousel, of code got so, , works, have problem resizing window.
the whole thing here
https://github.com/dingo-d/post-excerpt-carousel
it works fine if reload on window width, if resize window, navigation stops working should.
right now, when @ first post, cannot go previous (carousel won't move), , when you're @ last, carousel won't move forward. if resize, will. jquery code making work this
jquery(document).ready(function ($) { 'use strict'; $(window).on('load', function () { $('.post_excerpt_carousel').each(function(){ var $this = $(this); post_excerpt_positioning($this); }); }); $(window).on('resize', function(){ $('.post_excerpt_carousel').each(function(){ var $this = $(this); if ($(window).width()>760) { $(this).find('li').css('width', '570px'); } post_excerpt_positioning($this); }); }); function post_excerpt_positioning(e){ var $carousel = e; var outer_width = $(window).outerwidth(); var container_width; if (outer_width > 1190) { container_width = 1170; } if (outer_width > 960 && outer_width < 1190) { container_width = 960; } if (outer_width < 960) { container_width = parseint((9/10)*outer_width,10); } var $prev = $carousel.find('.carousel_prev'); var $next = $carousel.find('.carousel_next'); var duration = $carousel.data('duration'); var li_number = $carousel.find('li').length; var $ul = $carousel.find('ul'); var $li = $ul.find('li'); if (outer_width < 760){ $li.css('width', container_width); $li.eq(1).addclass('active'); if ($li.eq(2).hasclass('active')) { $li.eq(2).removeclass('active'); } } else if (outer_width > 760){ $li.eq(1).addclass('active'); $li.eq(2).addclass('active'); } var list_width = $carousel.find('li').outerwidth(true); var left_offset; if ($('.boxed_body_wrapper').length) { left_offset = list_width-60; } else{ left_offset = parseint(list_width - (outer_width - container_width-42)/2, 10); } $ul.css({'display': 'inline-block', 'width': li_number * $carousel.find('li').outerwidth(true) + 'px', 'left': -left_offset + 'px'}); var not_active_no = $carousel.find('li').not('.first').not('.last').not('.active').length; var not_active_width = not_active_no * $carousel.find('li').outerwidth(true); $carousel.on('click', '.carousel_next', function (e) { e.preventdefault(); var $li = $ul.find('li'); var $a = $('.active', $carousel); if (!$a.next().hasclass('last') && !$ul.is(':animated')) { $a.removeclass('active').next().addclass('active'); } if (parseint($ul.css('left'), 10) != -parseint(not_active_width + left_offset, 10) && !$ul.is(':animated')) { $ul.animate({ left: parseint($ul.css('left'), 10) - $ul.find('li').outerwidth(true), }, duration); } }); $carousel.on('click', '.carousel_prev', function (e) { e.preventdefault(); var $li = $ul.find('li'); var $a = $('.active', $carousel); if (!$a.prev().hasclass('first') && !$ul.is(':animated')) { $a.removeclass('active').prev().addclass('active'); } if (parseint($ul.css('left'), 10) !== -parseint(left_offset, 10) && !$ul.is(':animated')) { $ul.animate({ left: parseint($ul.css('left'), 10) + $ul.find('li').outerwidth(true), }, duration); } }); } }); the main issue when resize change offsets, , animation happens. second issue have on.('click') events inside function i'm calling, , don't think correct way code, around help.
codepen showcasing here: http://codepen.io/dingo_d/pen/donymw
ok, i've ditched function, because function , on click events delegation inside bad idea. simplified way checks last , first posts.
var $carousel = $('.post_excerpt_carousel'); $carousel.each(function(){ var $this = $(this); var outer_width = $(window).outerwidth(); var container_width; if (outer_width > 1145) { container_width = 1170; } if (outer_width > 960 && outer_width < 1145) { container_width = 960; } if (outer_width < 960) { container_width = parseint((9/10)*outer_width,10); } var duration = $this.data('duration'); var li_number = $this.find('li').length; var $ul = $this.find('ul'); var $li = $ul.find('li'); $li.removeclass('active'); if (outer_width < 760){ $li.css('width', container_width); $li.eq(1).addclass('active'); if ($li.eq(2).hasclass('active')) { $li.eq(2).removeclass('active'); } } else if (outer_width > 760){ $li.eq(1).addclass('active'); $li.eq(2).addclass('active'); } var list_width = $this.find('li').outerwidth(true); var left_offset; left_offset = parseint(list_width - (outer_width - container_width-42)/2, 10); $ul.css({'display': 'inline-block', 'width': li_number * $this.find('li').outerwidth(true) + 'px', 'left': -left_offset + 'px'}); var not_active_no = $this.find('li').not('.first').not('.last').not('.active').length; var not_active_width = not_active_no * $this.find('li').outerwidth(true); $this.on('click', '.carousel_next', function (e) { e.preventdefault(); if($this.find('li.last').prev().hasclass('active')){ return; } else { var $a = $('.active', $this); if (!$a.next().hasclass('last') && !$ul.is(':animated')) { $a.removeclass('active').next().addclass('active'); } if (!$ul.is(':animated')) { $ul.animate({ left: parseint($ul.css('left'), 10) - $ul.find('li').outerwidth(true), }, duration); } } }); $this.on('click', '.carousel_prev', function (e) { e.preventdefault(); if($this.find('li.first').next().hasclass('active')){ return; } else { var $a = $('.active', $this); if (!$a.prev().hasclass('first') && !$ul.is(':animated')) { $a.removeclass('active').prev().addclass('active'); } if (!$ul.is(':animated')) { $ul.animate({ left: parseint($ul.css('left'), 10) + $ul.find('li').outerwidth(true), }, duration); } } }); }); works should :)
Comments
Post a Comment