Creating a unique carousel design using only CSS in Bootstrap

Trying to create a CSS effect to enhance Bootstrap, I noticed that it only works correctly when clicking the right arrow. Whenever I click the left one, nothing happens. I'm not sure where I made a mistake, can anyone help me spot it? Thanks in advance! 

#sigle-items-slider .item {
    -webkit-transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
    -moz-transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
    -ms-transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
    -o-transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
    transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
}

#sigle-items-slider .active.left {
    left:0;
    opacity:0;
    z-index:2;
}

#sigle-items-slider .active.right {
    right:0;
    opacity:0;
    z-index:2;
}
#sigle-items-slider .next {
    left:0;
    opacity:1;
    z-index:1;
}

#sigle-items-slider .prev {
    left:0;
    opacity:1;
    z-index:1;
}

UPDATE

Finally got around to creating a jsfiddle example, check it out!

csstwitter-bootstrap

Answer №1

It appears that you have mistakenly initialized on the wrong selector:

http://jsfiddle.net/uDvBL/2/

$("#sigle-items-slider").carousel({
    interval: 1000
})

#sigle-items-slider .item {
    left: 0 !important;
    -webkit-transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
    -moz-transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
    -ms-transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
    -o-transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
    transition: opacity 1.5s cubic-bezier(0.765, 0.185, 0.000, 0.730);
}

#sigle-items-slider .active.left {
    left:0;
    opacity:0;
    z-index:2;
}

#sigle-items-slider .active.right {
    right:0;
    opacity:0;
    z-index:2;
}
#sigle-items-slider .next {
    left:0;
    opacity:1;
    z-index:1;
}

#sigle-items-slider .prev {
    left:0;
    opacity:1;
    z-index:1;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How does using position: fixed affect width in React components?

Can someone explain why my sidebar width is reduced when I apply position: fixed? Here is the code snippet: https://codesandbox.io/s/1yr3nlqp74 Steps to reproduce the bug: Open the code in a new window (full screen) Observe the picture before and after ...

reactjscssreact-reduxmaterial-ui

Placing a div with position:absolute inside another div with position:absolute and turning them into position:fixed

HTML <div class="box1"></div> <div class="box2"> <div class="box3"></div> </div> CSS Properties of box1, box2 and box3 are: box1 { position: absolute; z-index: 100; background-color: rgba(39, 39, 39, 0.3) ...

javascriptjqueryhtmlcss

I'm having trouble modifying the border color of a TableCell component in material-ui

I am struggling to change the border color of a table cell. Despite numerous attempts, I have been unsuccessful in my efforts. Can someone please assist me with this? const customTheme = createTheme({ overrides: { MuiTableCell: { root: { ...

cssreactjsmaterial-uiborder

Step-by-step guide to implementing a sticky header while scrolling

How can I implement a fixed header on scroll, like the one seen on this website: www.avauntmagazine.com Here is the HTML for my header: <div class="bloc bgc-wild-blue-yonder l-bloc " id="bloc-1"> <div class="container bloc-sm"> &l ...

javascripthtmlcss

The drop-down button unexpectedly disappears when using Bootstrap in combination with jQuery autocomplete

I have some javascript code that is structured like: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Autocompl ...

javascriptjquerytwitter-bootstrap

Creating a CSS class dynamically with AngularJS: A step-by-step guide

I'm working on an Angular JS website that pulls data from an API to create a dynamic CSS class. This class will be used to format other data being displayed on the page. Is there a way for Angular JS $scope data to be generated in the Controller whil ...

cssangularjsclassdynamically-generated

Styling with CSS based on the remaining width of the viewport relative to the height

If you're viewing this on a tablet browser, the dimensions are set relative to the viewport width and height. Let's assume a landscape orientation for simplicity. Inside a fullscreen container, there are two divs positioned absolutely, just like ...

htmlcsscss-positionviewport

Switch from flexbox layout to begin on the next column within the same row

I am attempting to create a CSS layout where, after a specific element like :nth-child(6), the elements will break and form a separate column within the same row. The parent element should split into 2 columns after every 6th element in the same row, then ...

htmlcssangular

Facing compatibility problems with JavaScript and Cascading Style Sheets in Google Chrome?

Welcome to the site . Let's address a couple of issues with JavaScript and CSS: Firstly, the JS code seems to be malfunctioning only in Chrome, throwing an error that reads: 'Uncaught TypeError: Object [object Object] has no method 'on prij ...

javascriptjquerycss

How can input be fixed in place within a list inside an Ionic framework popover?

I have the following code in a popover template: <ion-popover-view class="customPopup"> <ion-header-bar class="bar bar-header barHeaderCustom"> <h1 class="title">{{ 'AVAILABLE_SOUNDS' | translate }}</h1> </io ...

cssinputcss-positionionic-framework

Illustrate an element positioned beneath a child element within a different element

I am in the process of designing an overlay on a Google Map that resembles a real map placed on a table, using 2 pixel lines as creases above the map. This design does not significantly impact interactions with the map; only 6 out of 500 vertical lines are ...

javascripthtmlcssgoogle-maps

Using Column CSS Property with Google Maps in Chrome: A Potential Bug?

I'm facing an interesting issue and I could use some help understanding or fixing it. It seems like there might be a bug or a solution to this problem. I am currently working on a layout using the CSS3 property columns. Everything looks fine in Firefo ...

htmlcssgoogle-mapsgoogle-chrome

What are the steps to incorporating ng2-dnd with a background-image?

I am currently utilizing the ng2-dnd module to enable sorting of a list. While the functionality for sorting and dragging is working smoothly, there's one issue - users can only drag by clicking on the text within my element. My goal is to allow user ...

htmlcssangular

Issue with the top margin of the body

Recently, I've encountered a peculiar problem with a standard website layout that I use. The issue seems to be centered around the space between the top and the first div: navbar. No matter what I try, I just can't seem to remove it, as the reas ...

htmlcss

If the width is divisible by a certain value

I have a question regarding the width of my element that I want to divide by 90. If this width is a multiple of 90, I set the width of the element. If not, I move on to the next. For example, when the window width is 1000px and the element is at full widt ...

jqueryhtmlcss

Animated collapse with margin effect in Material-UI

I have been utilizing the MUI-Collapse component to display collapsible content within a list. I am looking to add vertical spacing between the Collapse components in the list, but I do not want the spacing to remain when the Collapse is collapsed. I am ha ...

htmlcssreactjsmaterial-ui

I am in need of help with coding so that my entire webpage is displayed properly even when I resize it to the smallest width. Additionally, I need assistance with making

Having some issues with making my personal website work correctly. I'm planning to share images of how it looks at different widths - largest width and smallest width. Also, here are the links to my website here and to my GitHub code here Seeking gui ...

cssresponsive-designresponsiveweb-frontendresponsiveness

Invoking a URL asynchronously on a website

Unique Font License Dilemma Recently, I came across a unique situation with a font license that required me to query a counter on the font provider's domain every time the typeface was displayed. However, the recommended method of using import in the ...

htmlcssasynchronous

The arrangement of my inline-block divs is oddly meandering in a zig-zag pattern

I am attempting to visualize basic commands and their arguments in HTML. Here is the expected output: https://i.stack.imgur.com/MTxbV.png However, the actual output looks like this: https://i.stack.imgur.com/biPFw.png This is the code I utilized: ht ...

css

Display the GIF when the mouse hovers over it, but ensure it plays just a single time

Is it possible to make a GIF only play once when you hover over it on a website? I want to avoid the animation repeating if the user hovers over it again without refreshing the page. Currently, I have a static image that changes to a gif on mouseover, but ...

htmlcss