<div>
what carousel are you using?
</div>


<div>
Hmmm, I would just use a different slider. This is what I get by just opening the site<br />
<a href="https://filedb.experts-exchange.com/incoming/2017/04_w15/1156503/slider.jpg" target="_blank" title="slider.jpg (73 KB)"><img alt="slider.jpg" class="file-block lazyload" style="max-width: 800px;" data-src="https://filedb.experts-exchange.com/incoming/2017/04_w15/800_1156503/slider.jpg" /></a>
</div>


slider.jpg

<div>
I wrote it myself. How do I fix?
</div>


<div>
Shaun, how did you get the overlapping slides? What browser and device are you using?
</div>


<div>
It is laptop, Windows 10 with Chrome 57
</div>


<div>
forget it then :)<br />
<br />
use the one that I use @ yurduminsani.com<br />
<br />
it is JQuery FlexSlider<br />
<br />
<a href="https://responsivedesign.is/resources/images/flexslider-responsive-jquery-slider-plugin/" rel="ugc">https://responsivedesign.is/resources/images/flexslider-responsive-jquery-slider-plugin/</a><br />
<a href="https://github.com/woocommerce/FlexSlider" rel="ugc">https://github.com/woocommerce/FlexSlider</a><br />
<a href="http://www.myjqueryplugins.com/jquery-plugin/flexslider" rel="ugc">http://www.myjqueryplugins.com/jquery-plugin/flexslider</a>
</div>


<div>
greetings &nbsp;APD_Toronto, , The portrait to landscape &quot;Width&quot; problem is in this file - &nbsp;carousel.js &nbsp;-<br />
<br />
and due to this line -<br />
&nbsp; &nbsp; &nbsp; &nbsp; var containerWidth = $('#divCarousel').width();<wbr /><br />
<br />
so it only uses ONE value for &nbsp; &quot;containerWidth&quot; &nbsp; no matter what happens to the view width! !<br />
<br />
It is my view that much of that your &nbsp;Jquey &nbsp;javascript is inefficient and sometimes does things that you take to much to do? ?<br />
<br />
Also, the way you set up your HTML container structures for your Carousel looks to me to be over done, you use this structure -<br />
<br />
&lt;div class=&quot;divCarouselDesc&quot;&gt;<br />
&nbsp; &nbsp; &nbsp;&lt;div class=&quot;divCarouselDescCont<wbr />ent&quot;&gt;<br />
<br />
<br />
with two &lt;div&gt; when you could have used just one &lt;div&gt; <br />
<br />
also you do NOT separate by ID or structure placement, , the two Carousels u use, so they are seen overlapping each other
</div>


<div>
Thanks Slick812. &nbsp;Based on your observationn, I made a few adjustments in my js, but its still glitching when you change orientation. Any ideas?
</div>


<div>
when I &nbsp;change the style left in a slider in responsive , I normally use the percentage % and not a px -<br />
&nbsp; &nbsp; &nbsp; $(slides).eq(prev).css('le<wbr />ft', &nbsp;'100%');<br />
<br />
but it depends on other factors sometimes.<br />
<br />
I am not sure about what you did, but if you use pixel width from &nbsp;$('#divCarousel').width();<wbr /> &nbsp; then you will need to add a window change width, one way is with -<br />
<br />
&nbsp; &nbsp; &nbsp; $(window).on('resize', function() &nbsp;{
</div>


<div>
I changed everything into &nbsp;%, but as it runs I see in Chrome inspector it still uses px.<br />
<br />
I also have a suspicion about line 134, but I don't know how to rewrite this, but removing it causes a cris-cross effect.
</div>


<div>
OK, , I don't have the time now to take your code apart and figure out what's what? &nbsp;But it seems that the Jquery animate, might only work to do pixel position animation, the div that shows does not seem to move out of the way properly.<br />
<br />
I would say to go back to your pixel code, but in my browser , firefox, it did NOT work as a slider properly, and would do several unusual displays, of the animations, and Not animate sometimes.<br />
<br />
I have moved away from jquery animation, and now pretty much use the CSS transition, to animate.<br />
<br />
You may should try and redo some of your javescript code progressions, like I said, in firefox it was a very unusual display of div changes and movements.<br />
<br />
Sorry I can't be more help now, but busy for today
</div>


<div>
dont waste your time on that code<br />
just get the &nbsp;JQuery FlexSlider and have fun...
</div>


<div>
FlexSlider seems to only do images.
</div>


<div>
I also adjusted my code, but now it seems to skip a slide.<br />
<br />
FlexSlider seems to do only images and little caption.
</div>


<div>
then get this, $16<br />
<br />
<a href="https://revolution.themepunch.com/jquery/" rel="ugc">https://revolution.themepunch.com/jquery/</a><br />
<br />
examples<br />
<a href="https://revolution.themepunch.com/examples-jquery/" rel="ugc">https://revolution.themepunch.com/examples-jquery/</a><br />
<br />
or buy a template that has revo slider for $15, something like this<br />
<a href="https://themeforest.net/item/sapphire-responsive-business-html5-template/7163692?s_rank=4" rel="ugc">https://themeforest.net/item/sapphire-responsive-business-html5-template/7163692?s_rank=4</a><br />
<br />
slider demo in this theme<br />
<a href="http://preview.themeforest.net/item/sapphire-responsive-business-html5-template/full_screen_preview/7163692" rel="ugc">http://preview.themeforest.net/item/sapphire-responsive-business-html5-template/full_screen_preview/7163692</a>
</div>


<div>
omg :)<br />
<br />
why you are trying to invent the wheel again...<br />
<br />
there are lots of free/commercial sliders around based on jQuery which works on all browsers/mobile friendly / responsive and tested by millions!<br />
<br />
you are torturing yourself!<br />
<br />
<a href="https://dcrazed.com/free-responsive-jquery-image-sliders/" rel="ugc">https://dcrazed.com/free-responsive-jquery-image-sliders/</a><br />
<a href="https://codegeekz.com/jquery-image-slider-plugins/" rel="ugc">https://codegeekz.com/jquery-image-slider-plugins/</a><br />
<a href="http://www.learningjquery.com/2015/02/best-jquery-image-slider-plugins" rel="ugc">http://www.learningjquery.com/2015/02/best-jquery-image-slider-plugins</a>
</div>


<div>
Glad we could help.<br />
<br />
@OP, experts and future visitors:<br />
Please remember to endorse my, or any other expert's comments that you found helpful by clicking on the &quot;Thumb's Up&quot; button<br />
<br />
Read more on endorsements<br />
<a href="https://www.experts-exchange.com/discussions/218503/What-are-Endorsements.html" rel="ugc">https://www.experts-exchange.com/discussions/218503/What-are-Endorsements.html</a>
</div>


<div>
<div class="content wysiwyg-content">
Hi Experts,<br />
<br />
Can anyone see why the carousel at <a href="http://aces-project.com/2017/" rel="ugc">http://aces-project.com/2017/</a>&nbsp;sometimes glitching, especially on mobile devices and when you turn it portrait to landscape or vise-versa.<br />
<br />
Thank you
</div>
</div>


Hi Experts,

Can anyone see why the carousel at http://aces-project.com/2017/ sometimes glitching, especially on mobile devices and when you turn it portrait to landscape or vise-versa.

Thank you

Glitching Slide Show

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

JavaScript

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.