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
Related
I want to implement a carousel using the excellent Slick Slider(https://kenwheeler.github.io/slick/) which I have used for images before with no problems. I'm trying to create a 'center mode' slideshow like the example except using several div;
I want to do something like this;
These are the div's I want to use on codepen here - https://codepen.io/grabthereef/pen/mdymmgM
<!-- Single Card -->
<div class="single_slide">
<div class="row">
<div class="col-lg-4">
<div class="top-text">
<h1>DG Aurum</h1>
</div>
<div class="view-button">
<button type="button" class="btn btn-outline-danger-opposite shadow btn-sm m-1">Live View</button>
</div>
</div>
<div class="col-lg-8 text-center">
<img src="https://i.imgur.com/jieUOmw.jpg" class="shadow website-image" alt="website image">
</div>
</div>
</div>
The problem is when I add the Slick Slider code it messes the layout of the page;
https://codepen.io/grabthereef/pen/gObWBVG
I've tried looking through the other questions on here but I can't find a solution that works for me, I'm fairly new to JS.
If you go ahead and load the slick slider css file, that should pretty much fix the problem for you //cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css. I found this out only after making a very barebones version of the slick slider on my own codepen https://codepen.io/dthenley/pen/PowJbgN and proceeding from there. My slider was doing pretty much the same thing yours was right until I added the css code. I also loaded it with a document ready function
$(document).ready(function(){
$('.your-class').slick();
});
This is my first time publishing a question, so forgive me if there's something wrong with it.
I'm currently working on a three-slide custom carousel ad template, using amp-carousel from project AMP.
I've made my template available to you via this link: https://jsfiddle.net/mlealrinaldi/6hvx15gb/
Among the premises of the project, there are two that are mandatory:
1) The second carousel slide has to be partially visible on the right corner when the first slide is displayed (to arouse the user's curiosity when seeing the ad).
2) In the desktop version, when using the 'next' and 'prev' buttons, the carousel should scroll to the center of the next or previous image in the sequence.
The problem I found was that type="carousel" allows me to partially display the next slide, but when I click the 'next' button, it does not scroll to the center of the next slide. It scrolls past beyond the center instead.
And when I use the type="slides", the navigation buttons scroll correctly to the center of the next slide but does not allow me to display part of the next slide (only one slide at the time).
I'm looking for a solution that contemplates these two requirements. For reference, here's a link to amp-carousel documentation: https://www.ampproject.org/docs/reference/components/amp-carousel#type
This is the part of the HTML that contains the carousel:
<amp-carousel height="245" layout="fixed-height" type="carousel">
<div class="slide" id="slide1" style="margin-left: 20px">
<img height="170" width="200" src="slide0.png"/>
<div>
<div class="cta" style="float:left"><p>São 100 carros todos os dias</p></div>
<div style="float:left;margin-top: 10px">
Participe
</div>
</div>
</div>
<div class="slide" id="slide2">
<img height="170" width="200" src="slide1.png"/>
<div>
<div class="cta" style="float:left"><p>Se ligar, é seu!</p></div>
<div style="float:left;margin-top: 10px">
Participe
</div>
</div>
</div>
<div class="slide" id="slide3">
<img height="170" width="200" src="slide0.png"/>
<div>
<div class="cta" style="float:left"><p>Faça o teste drive.</p></div>
<div style="float:left;margin-top: 10px">
Participe
</div>
</div>
</div>
</amp-carousel>
I've also tried to look into the .js AMP functions that listen to the click on the navigation buttons, and make the carousel work, but my limited knowledge only took me so far.
I am new in quasar framework.
I need to know how to make image gallery slider automatic change in a few second. how i can setting it?
sorry if my grammar bad.
You should put your code attempts for future questions.
See the quasar documentation here: http://quasar-framework.org/components/slider.html
A simply example about you want:
<p class="caption">
Slider with Infinite Scroll and Autoplay
</p>
<q-slider infinite autoplay arrows dots class="text-white">
<div slot="slide" class="bg-primary centered">
Slide 1
</div>
<div slot="slide" class="bg-secondary centered">
Slide 2
</div>
<div slot="slide" class="bg-tertiary centered">
Slide 3
</div>
</q-slider>
'autoplay' property can be boolean or number(represents the number of milliseconds between scrolls.)
I'm using HTML, CSS and Jquery and I did a image hover effect with the watch image and I want to be able to add the same image and effect with multiple images vertically down the center of the page but it wont let me, here's the site in question! any help would be great!
<div id="header">
<h1></h1>
</div>
<div class="center12">
<img src="image/logocenter1.png" alt="** PLEASE DESCRIBE THIS IMAGE **">
</div>
<div id="nav">
<h2>
Home / Styles & Sizes /
Brands & Prices /
Watch Straps / Tips on buying used
</h2>
</div>
<div class="fadehover">
<img src="image/test1.png" alt="" class="a"> <img src="image/test1bw.png" alt="" class="b">
</div>
It seems like it should be simple, but it wont work.
Instead of using jquery and two images for gray scale effect, use the following:
By adding an css you can bring the same effect using a single image(no need of jquery and hover image).
Add this css:
<pre>
img.a:hover {
filter: url("");
}
</pre>
and remove the jquery and another gray scale image. If you don't want hover effect and the images are needs to be shown one by one down, remove one of the images inside the div and put it into a separate Div'
I use cycle2 plugin to display a slideshow comprised of some images and another slide show. The inner slideshow's next and prev buttons does not work for some reason(up and down, in the example) although they are properly set IMHO:
data-cycle-prev="#upDiv"
data-cycle-next="#downDiv"
and
<div id="upDiv">
<img src="images/up.png" alt="" />
<p>scroll up</p>
</div>
<div id="downDiv">
<p>to see more scroll down</p>
<img src="images/down.png" alt="" class="outer-slide" />
</div>
How can I make them work?
here is a demo: http://jsfiddle.net/FKU2L/22/
There're a few issues
First, in cycle 2, nested slideshows should look like this:
<div class="cycle-slideshow" data-cycle-slides="> div">
<div><img src="..."/></div>
<div>
<div class="cycle-slideshow inner-slideshow">
<img src="..."/>
<img src="..."/>
</div>
</div>
<div><img src="..."/></div>
</div>
The important things are that the slides should all be the same tag, like img img img or div div div not img div img. So you'll need to wrap your first level of slide imgs inside of divs. Since they are now not img, which is the default, you need to set data-cycle-slides="> div" on the outer slideshow.
In addition, you also need your inner slideshow to be inside of a div as well, like <div><div class="cycle-slideshow inner-slideshow"> instead of just <div class="cycle-slideshow inner-slideshow">. Slideshows can be nested, but not crossing swords.
What's currently happening on your example is that it's running both slideshows together, using the same next and prev buttons for both shows, and ripping the imgs out of the divs. So instead of running 2 nested slideshows, you're running 2 concurrent slideshows, where one happens to be inside of the other, which is a by-product of the slideshows directly touching each other and the first show's slides not being nested in divs.
made a working fiddle: http://jsfiddle.net/filever10/dLQPD/
You can learn more by viewing the source here: http://jquery.malsup.com/cycle2/demo/nested.php