Questions tagged [carousel]
A dynamic showcase of diverse information incorporates navigational buttons like "next" and "previous," enabling seamless browsing through the content.
Here is a visual reference of what I'm attempting to achieve: https://i.stack.imgur.com/EoQYV.png I've been working on creating a carousel with cards, but I'm struggling to synchronize the button indicators with card advancement when clicke ...
Currently working on a carousel feature and aiming to highlight the element positioned in the middle of the slider. This will help draw attention to it. https://i.stack.imgur.com/NB9xB.png Any suggestions on how I can target this specific component? While ...
I've created a carousel using React-slideshow-image, but the issue is that it doesn't support swiping on mobile devices. I would like to implement swipe functionality myself, but I'm not sure how to go about it. Can anyone provide guidance ...
I am currently working to modify some existing code to fit my website concept. One aspect I am struggling with is how to make the 'pause' function activate only when a user hovers over one of the li items, preventing the carousel from looping end ...
Can this carousel be configured to show just 2 pictures at a time instead of 3? Check out the live demo here. I've attempted adjusting the columns to col-md-6 and the CSS to 50%, but haven't had any success... ...
I have written a piece of code that sets the height of a block of text and then applies that height to an image within the block. However, the size of the image ends up being smaller than the size of the block. https://i.stack.imgur.com/QUFWy.png <scr ...
Struggling to set up a carousel with material ui? Currently, I am facing an issue where only one card is being displayed in a row instead of three. Any tips on how I can fix this problem would be greatly appreciated. Thank you! Here's the code snippet whe ...
I'm facing some difficulties with the Bootstrap carousel on my website. I have followed all the instructions carefully and researched for solutions, but unfortunately, my carousel is not functioning properly. It seems like everything is set up correctly, s ...
Recently, I incorporated the Basic jQuery slider into my website, which can be found at . As a novice in jQuery but well-versed in HTML and CSS, I have managed to make it work seamlessly on my site. However, I am curious to know if there is a way to displa ...
Having multiple slides, I initially displayed all indicators by listing them as shown in this example: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp. However, due to the dynamic nature of the slide count, I implemented ng-repeat. Despite my e ...
Check out my project here: I'm currently working on a bootstrap carousel that has absolute positioning and a z-index of -1. However, I'm facing an issue where I can't figure out how to place a div right after the carousel. I've tried searching for solutio ...
I am currently working on implementing a carousel pagination using the Caroufredsel plugin. I am looking to create unique custom Titles for each slide in the pagination, rather than using default numbers. My goal is to have completely different Titles fo ...
After setting a fixed height for the image, I noticed that the same height is also being applied to the thumbnails. How can I avoid this issue? <Carousel width="600px" dynamicHeight={false}> {data?.book?.images.map((image, i) => ( ...
Trying to incorporate the SlitSlider carousel into my project has proven challenging due to a lack of thorough documentation. Has anyone successfully implemented this? I keep encountering the error message: TypeError: self._init is not a function You can ...
Currently struggling with a bug found in the keen-slider react js library. When there are no more items to slide, the dots continue to appear. Here is a link to the code sandbox: https://codesandbox.io/s/quiet-fog-ekwqd?file=/src/App.js ...
I have a simple carousel set up with this code. I'm looking to make it loop back to the beginning after reaching the third quote-item. Can anyone provide some guidance? Thank you! This is the JavaScript used: <script> show() $(function() ...
I am currently working on creating a carousel using React, where the content images are aligned horizontally. If I have 3 image tags within a div with a width of 1200px, how can I effectively control these images to ensure they fit within the container div ...
I found some code on a different website to put together a Bootstrap 5 carousel. Unfortunately, the alignment of my carousel is off as it is positioned to the left and I would prefer for it to be centered within the container. <div class="container ...
Seeking assistance with customizing the carousel functionality. There seems to be some issues, and I could use a hand in resolving them. Desired Carousel Functionality: Automatically start playing the carousel on page load, and once it reaches the end of ...
Hello, I am trying to create an infinite carousel effect for my images. Currently, I have a method that involves restarting the image carousel when it reaches the end by using the code snippet progress = (progress <= 0) ? 100 : 0;. However, I don't like ...
I am currently modifying a carousel where the thumbnails are moving out of frame. I need assistance in keeping them stationary, except for the blue thumbnail highlighter. To better illustrate the issue, I have created a jsFiddle here: http://jsfiddle.net ...
I recently set up a dynamic carousel that pulls images directly from a node backend. While everything seems to be in working order, I've run into an issue where all the images are being displayed at once instead of sliding through one at a time. This ...
I've got this code snippet that I'm working on. I want to incorporate a Carousel feature using Angular 9 without relying on any external libraries. Currently, all the data items are appearing in a single row (they are exceeding the specified bor ...
{% extends 'shop/basic.html' %} {% load static %} {% block css %} .col-md-3 { display: inline-block; margin-left:-4px; } .carousel-indicators .active { background-color: blue; } .col-md-3 img{ width: 227px; max- ...
I have been trying to add custom arrows to my react carousel, but I keep encountering the 'type' is not defined no-undef error. I would appreciate it if someone could point out what mistake I might be making and provide a solution for the current situation ...
As a beginner in Bootstrap, I am currently working on an ecommerce template to learn about Bootstrap 5. I am interested in creating a carousel that displays multiple slides at once, like a products slider with left and right arrows. Is this possible in Bo ...
I'm having trouble implementing a text-based horizontal slider on my website that scrolls left and right with mouse control. I want to display the current index of each slide along with the total number of slides (e.g. 1/4) and update the index as users sc ...
My goal is to implement an endless scrolling carousel in AngularJS using owl-carousel. The idea is to load new items every time the carousel is fully scrolled and seamlessly merge queried elements with the existing list. However, I've encountered a problem ...
My current setup includes a carousel like so: <div> <carousel id="myC" interval="3000" > <slide ng-repeat="order in orders"> <img ng-src="whatever.jpg" style="margin:auto;"> <div ...
Seeking assistance on properly positioning custom arrows within the Nuka Carousel component. After combining the decorators, I found that both of my arrows are appearing side by side. How can I address this issue? My goal is to have one arrow positioned in ...
I encountered a situation like this: I need to implement a Ngb Bootstrap carousel with buttons for Previous and Next to control the slide images. Clicking on the Previous button should display the previous slide image, and clicking on the Next button shou ...
Currently, I am encountering issues with a Flickity carousel of images. When an image/slide is clicked, a modal window opens to display a zoomed-in version of the image. The problem arises when there are more or fewer than 3 images in the slider — my cod ...
While testing the various components on ng-bootstrap, I encountered an issue with getting the carousel to work. Strangely enough, all the other ng-bootstrap components are functioning perfectly. Upon implementing the code from , the result is a blank white ...
I have integrated ngb-carousel into my Angular application for a basic website. Overall, everything is functioning correctly, but I have noticed that when I refresh the page, the carousel's image takes longer to load compared to the indicators and arrows. ...
Whenever I hover over the li with the number 3, I am getting the wrong number for the next id in the img tag. The first time, I get next id = 4 which is incorrect. But on the second hover, I get next id = 0 which is what I actually need. How can I correctl ...
Adding items to a Slick carousel in a vue.js demo is proving to be a bit tricky. When I try to use the refresh() function after adding an item, it doesn't seem to work as expected even though the item is successfully added with vue.js. //Attempting to refr ...
I've been developing an online store using nextJS and Strapi, and I decided to implement the react-responsive-carousel. Following the instructions on [ https://www.npmjs.com/package/react-responsive-carousel ] went smoothly. (I am currently working on loca ...
I'm currently working on a project involving e-commerce and need to retrieve product details data via SSR to display it on the screen. Everything is showing up correctly except for the product images. I'm using the react-responsive-carousel compo ...
Currently, I am in the process of developing a Pokedex-like feature for a project that I am working on. The functionality is working as expected, but there is one particular feature that I would like to implement. My goal is to display only certain element ...
When it comes to CSS, I utilize ng deep style in Angular 10 to make changes for browser CSS. However, I am facing an issue where the problem is not being resolved by my CSS code. Here is a snippet of my code: > ::ngdeep .carousel-arrow { > b ...
I am currently using the Slick carousel plugin and I want to feature a display of 3 photos. The issue is that when I set slidesToShow=2, everything works perfectly fine, but when I try to set slidesToShow=3, which equals the total number of slides, the bot ...