I have created a basic image carousel using the Owl Carousel plugin.
By default, the "prev" and "next" buttons appear below the images, I have used a negative margin in CSS to push them up over the image.
However, now, when I hover over the buttons, they start to flicker. Has anyone else come across this? Any idea how to fix this?
Set the z-index higher for buttons than slide div and put backface-visibility:hidden; on button and slide both.
To prevent the buttons from flickering, simply set the ".owl-wrapper" to have a lower z-index than ".owl-pagination".
Thanks for solving this so quickly.
Related
I have this custom slider
Working Link :
https://stackblitz.com/edit/angular-ivy-rwuxjd?file=src%2Fapp%2Fapp.component.html
Slider is working but Next and previous buttons are not at proper location when we slide it to next or previous slides, Every slide will have different contents and slide height will also change, but issue is when i slide to next or previous then Next and Previous buttons location should be managed automatically but presently when we click on next next while slides are being translated the button moves to top most position. I don't want to fix the button position, It should be managed according to the content height.
Any solution is highly appreciated. Thanks
You need to add some CSS rules for that. Try put a container div around the buttons and the image slider and give it a min-height.
Not perfect but will put you in the right direction.
https://stackblitz.com/edit/angular-ivy-airvm5?file=src/app/app.component.css
I probably need a step in the right direction as I'm not sure if this is a CSS transition issue or a Jquery issue.
I'm trying to implement the carousel listed here:
https://www.codeply.com/go/XPajZsz60p/bootstrap-4-responsive-carousel-4-slides-slide-one
But when I tried to implement it (see half way down the page under Recent Clients) and try to slide right, it does not have a smooth transition. The slide left works perfectly.
http://www.fordengineering.ca
When I slide right, the new icon appears almost immediately and covers over the whole slide.
Is this because I should be doing this on the bs.slid.carousel function instead of the bs.slide.carousel function in JQuery? Or is this because of a CSS issue?
I would like to make a carousel slider similar to what you see on the new design for Youtube.com and pages like this: https://plus.google.com/discover/w29saB
Any recommendations on how to build this, or Jquery plugins that facilitate this.
I've tried itemSlide() but I don't know how to get the CSS so that it renders inside the container DIV properly. Also Itemslide doesn't give the arrows to scroll to the next page.
Other carousel plugins I've looked at even with their responsive options, make you specify the number of items to fit on a page. I would like that to be determined by css.
Update I've gotten itemSlide() to render in the container div however I still need to be able to add the arrows so that it scrolls when clicked. I figure getting the buttons to overlay is a matter of the right CSS. Getting the scroll to work when clicked is likely something specific to the itemSlide api that I should be able to figure out once the arrows are overlaid properly. itemSlide() as carousel slider library: http://itemslide.github.io/
Why not try a DIV inside a DIV. Have the overlap as hidden in css. Arrows can be div buttons that move the inner div "X" number of pixels in a given direction to match the block sizes in the carousel stile div.
Once you get the arrows overlaid you can use the disable_clicktoslide option of the library so that clicking on slides doesn't move to them.
To make the arrows work, call the functions next() and previous() on the carousel object.
Also you can use the function getActiveIndex() to detect where the user is on the carousel.
Good luck!
I'm currently working on a project and I want to use this full screen carousel (http://bootsnipp.com/snippets/ZkRvj). I'm currently using the latest bootstrap 3 version (3.3.7) however this particular snippet was built for 3.2.0.
(If you change the bootstrap version in bootsnipp to the latest, you can also replicate the problem)
The issue I am having is that the DIV .overlay used to darken the background of each slide in the carousel is also overlapping the text and button which means the text and button is also getting darkened. I have tried giving the .hero class (used for the text and button) and the child elements a higher z-index however this does not fix the problem. I have also tried lowering the overlay z-index but this also doesn't work.
This issue does not show in bootstrap 3.2.0 but in 3.3.7 it does and I have no idea how to get around this issue.
Thanks
I don't know why the change in bootstrap version should give this issue, though it obviously does...
I got around your problem using 3 steps:
1) Give .carousel-inner a background-color: #000;.
2) Delete the '.overlay' div.
3) In your .slide-x rule (where you set the background image), add opacity: 0.4;.
Basically, this makes the image semi opaque, but not your hero. As you can see through the image to the (now) black background of the slide container you get exactly the same effect without the z-index heartache.
I have 2 Bootstrap carousels here.
If you're in Chrome and shrink the screen down to a mobile view(under 500px), you'll see the slider under "Check out our latest real rides". If you click on the arrows it behaves really weird. It keeps sliding the first slide back to the active position. Even though the other items have the active class.
Here is my JS:
$('#slCarousel, #real-rides-mobile').carousel({
interval: 5000 });
I'm not sure what's going on exactly. You can view the source right in dev tools.
Any help is very much appreciated
Remove display:block; from #real-rides-mobile .item
The carousel is supposed to use that property.