Develop Reference

Carousel scrolling with TranslateX doesn't render overflow elements (JS, CSS)

I am so stuck, and wondering if I should continue relying on translate3d for scrolling.
I'm building my own custom slider/carousel that can show multiple posters at a time depending on screen size. But when I scroll using my mouse, I get mixed results, if I don't use the buttons, it scrolls using the mouse all the way back and forth just fine, but as soon as I click any of the left/right buttons, the mouse will stop scrolling.
I have a left and right button (absolute.) On each scroll, they scroll a set of items (3 - 5 items) using translate3d(), and they work perfectly fine and as expected.
<div class="container" style="display:flex; position:relative">
<!---- Slider ---->
<div class="slider" style="display:flex;>
<div class="slide">
<img src="..." />
</div>
<div class="slide">
<img src="..." />
</div>
<div class="slide">
<img src="..." />
</div>
<div class="slide">
<img src="..." />
</div>
<!--- more slides -->
</div>
<!--- buttons on opposite ends of the slider, scrolls using translate3d() --->
<div class="left" style="position:absolute;"></div>
<div class="right" style="position:absolute;"></div>
</div>
The solutions that I have tried to make translate3d work are below.
Force browser to create a new layer by adding Translate3D() to the slider and all of its children,
Reverse container, then reverse slider to undo container's reversal. For this, I tried both transform scale, and flex-direction, but none of them worked 100% of the time. Very mixed results.
Will-change, was happy when I saw this but it didn't work.
A few more hacky methods. But none really worked for me.
My gut is telling me to just go with scrollLeft, or scroll into view, and call it a day. But I heard the performance of translateX is far superior, has this been absolutely confirmed? And are there any fairly recent, adopted alternatives out there that also perform well?
Thanks

jQuery append html loading randomly on page reresh

I have a this problem:
I use a jquery plugin fullPage.js by Alvaro Trigo on my website. The plugin script automatically inserts the html structure in certain elements... in my html I have:
<div class="section fp-auto-height-responsive" id="slider-section">
<div class="slide" id="co-delame-section">
<div class="slide-wrapper">
...
</div>
</div>
</div>
And when the page is loading, javascript generates extra html tags and css, so it looks like:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
</div>
I want to append more slides (slide class) for a certain page resolution, so that when user is on mobile with smaller screen, the extra slides won't load.
I do it with this javascript code:
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
});
And there is the problem... it works in about 50% page loads, the problem is that sometimes it appends the slides after the fullPage generates the structure, so that the appended slides are out of the slider structure... like this:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<!-- the right place of a slide -->
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
<!-- appended slides out of slider blocks -->
<div class="slide" id="jsme-partner">
</div>
<div class="slide" id="vase-problemy">
</div>
</div>
So it looks the fullPage.js script runs before the slides are appended, but in the html head tag I firstly put the script to append the slides and fullPage is loaded after...
But what is really weird is that sometimes it loads correctly, sometimes not. Clearing the cache on refresh helps sometimes, but I can't say if there is any pattern with deleting the cache.
You can check it on http://marketingo.cz/en/?stack-overflow#About and give it a few refreshes with cache clearing to see...
The questions is - how can I ensure that the html is appended before the fullPage plugin modifies the code so that the appended sliders will be in a same container?
Thanks for a help! :)

Easy.
Just initialice fullPage.js after you append the slides by using the $.get callback.
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
//initialice fullPage.js here:
$('#fullpage').fullpage();
});

How to leave fullPage.js and continue navigation?

Example: http://www.hugeinc.com/
I have a portfolio website with a few slides about different projects. After that I'd like the user to continue navigating through other sections, but with normal scrolling (not the fullPage effect).
<div id="fullpage">
<div class="section">
<div class="slide" data-anchor="slide1"> Slide 1 </div>
<div class="slide" data-anchor="slide2"> Slide 2 </div>
<div class="slide" data-anchor="slide3"> Slide 3 </div>
<div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>
</div>
After the finish fullpage div it stops scrolling, but the page still has an about and contact sections

You can use pagePiling.js for that purpose. The small brother of fullpage.js.
I created an article about how to create a website like hugeinc using pagePiling.js.
If you are just worried about the scrolling functionality in fullpage.js you should be using scrollOverflow:true as in this example.

Show next and previous image in Twitter Bootstrap Carousel

I’m searching for a way to display the next and previous slideshow image within the Twitter Bootstrap Carousel.
As per default it just show the current image and if I remove the display:none css property it has every item in the carousel below each other. I’ve tried to play with the CSS but haven’t got it to work.
The idea is to display the current slideshow image in the middle and then the next and previous image with opacity, not necessarily clickable.
I’ve tried different slideshows and carousels but can’t seem to find anyone which satisfies these requirements and some of those who come close will not adapt to the responsive design that Bootstrap provides.
Normally when I’m using the carousel with multiple items, I just group e.g. images within the <div class="item"> div like:
<div class="item active">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
<div class="item">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
<div class="item">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
But this will not do what I want because it rotates all three items at the time and not take one image each.
Any suggestion, advice, or link for some walk-through or tutorial will be very much appreciated.
Cheers

This is the link that helped me
Twitter Bootstrap 101: The Carousel

Simple JS slideshow that will work with N entries

I would like to create a simple javascript slideshow that allows a user to click 'Previous' or 'Next' and have the element slide in from the right or left depending. Content will be coming in from a CMS, so it's not 'hard-coded' persay. My markup would look like this ideally (where the most recent entry receives the 'show' class):
<span class="back">Previous slide</span>
<span class="next">Next Slide</span>
<div id="slideshow">
<div class="client show">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
</div><!--end slideshow-->
I need something that will automatically detect order and allow the number of .client classes to be anything. This seems very close: http://jsbin.com/ekecu but I don't want it to be based on visible links to switch, just the same absolutely positioned previous and next buttons.
Would really appreciate some help, or if you were feeling especially generous an source snippet I could use.

Shadow Box or Fancybox?