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.)
Related
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
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.
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.
I am interested in making HTML5 page with page scrolling like this one: http://www.apple.com/iphone-5s/
I would be grateful is someone could point out how this scrolling is made and/or what frameworks are involved or could reach identical result.
It is easy.
Make bind to mouse scroll, and create slides.
<div class="b-slider">
<div class="b-sider__item">
Item 1
</div>
<div class="b-sider__item">
Item 2
</div>
<div class="b-sider__item">
Item 3
</div>
<div class="b-sider__item">
Item 4
</div>
<div class="b-sider__item">
Item 5
</div>
</div>
And use jcarousel slider plugin with vertical scroll options
$('.b-slider').jcarousel('next');