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

Placing elements in an exact position within a parent container is causing an overlap with the

I am struggling to grasp why a div set as absolute inside a relative div is overlapping with other elements. From what I understand, it should remain fixed within its parent relative div, right? This is my solution: #container { position: relative; ...

css

Tips for uncovering a concealed div within an iframe?

It's as if there's a mystery surrounding how to reach this elusive div... div#someId iframe html>head>body div.wrapper div.footer Naturally, my strategy: #someId iframe body .footer is proving to be ineffective. ...

csscss-selectors

Methods like jQuery blink(), strike(), and bold() offer dynamic ways to manipulate

I'm currently tackling an inquiry. The code I crafted seems to be functioning without any issues: (function () { if($('#target:contains("bold")')) { $('#target span:first').css('font-weight','bold ...

javascriptjquerycss

Angular toolbar on the left side that hovers seamlessly

1 I am using Angular Material toolbar and trying to position a span inside the toolbar on the left side. I have attempted using CSS float left, but it is not working. Can anyone provide some assistance please? <mat-toolbar> <span>le ...

cssangularangular-material

What is the best way to flip cards with the onClick event in JavaScript?

My cards are currently facing down with the code* provided. What steps should I take to flip them face up using onClick functions? Furthermore, how can I store the IDs in an Array and use them to retrieve images from my image collection? HTML <table s ...

javascripthtmlcss

Image Not Displayed on Page

I am facing an issue where I have a div class 'breadcam_bg' with an image url, but the image is not being displayed on the page even though the console detects the div. html <div class="bradcam_area breadcam_bg"> This div! & ...

htmlcsssass

Sliding an image from the left side to the right, and then repeating the movement from left to right

I am currently working on a CSS effect for some images. My goal is to have an image appear from the left side, move towards the right side, then reappear from the left and repeat this cycle. I managed to achieve this using the code below: @keyframes sli ...

javascripthtmlcsscss-animations

Using React Typescript to create a button component with an attached image

I am currently utilizing React with Typescript. How can I incorporate an image into my button? I've attempted to do so without any errors, but the button appears blank. What's the best way to style my button element using Emotion CSS in this ...

cssreactjstypescriptemotion

Creating stylistic layouts for text using CSS

After spending the last hour designing a web page, I am stuck on a particular issue that I just can't seem to solve. I need to write several paragraphs while adhering to two specific constraints: 1) The div in which the text resides must be centered ...

htmlcss

Utilizing the Bootstrap portfolio section, I aim to eliminate the 'ALL' tab and ensure a category is selected

Currently, I am utilizing this template If you scroll down to the WORK section, you will find the portfolio section which is filterable. The default selected option is "ALL," displaying all items. However, I would like to remove this and activate a diffe ...

javascripthtmltwitter-bootstrap

Flexible DIVs with a maximum width of 50% that adjust to different

I'm having trouble getting these two DIVs to display properly within a parent DIV while maintaining responsiveness. I want them to each take up 50% of the screen with a 10px margin between them. Does my current code approach seem correct? .box-cont ...

htmlcss

Error in validating Bootstrap 3 Datepicker and DateTime data

I have implemented Bootstrap 3 Datepicker () to display a DateTime Picker for a specific model property: Model: [Table("Calls")] public partial class Call { [Key] [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)] public int Id { ...

c#jquerytwitter-bootstrapdatetimedatepicker

Div that scrolls only when children can be displayed without overflowing

I am seeking a solution to ensure that the children inside my scrollable div are only visible in their entirety. HTML <div id="container"> <div class="child"></div> <div class="child"></div> <div class= ...

htmlcss

Implement the color codes specified in the AngularJS file into the SASS file

Once the user logs in, I retrieve a color code that is stored in localstorage and use it throughout the application. However, the challenge lies in replacing this color code in the SASS file. $Primary-color:#491e6a; $Secondary-color:#e5673a; $button-color ...

javascriptcssangularjssass

IE and Firefox both render CSS styles in their own unique ways

When viewing my website acro.batcave.net on different browsers like IE (Windows 7, IE 11.x) and FF (Windows 7, FF 37.x), I noticed that it appears differently. Chrome seems to have the same display as FF. The CSS file can be found at acro.batcave.net/css ...

css

The Power of the CSS Universal Selector and Specificity

Currently exploring the puzzling scenario where .x seems to have higher specificity than *.x, despite expectations. Shouldn't *.x technically have a specificity of 0-0-1-1 (1 class, 1 tag) while .x is just one class with specificity 0-0-1-0? Let&apo ...

csscss-specificity

Utilizing the Flex property on the parent div ensures that all child elements receive an equal width

I am currently working on a messaging application and I want the layout to be similar to Twitter or Whatsapp. Specifically, I want the messages from the person the user is chatting with to appear on the left side, while the user's own messages should ...

javascripthtmlcssuser-interfaceflexbox

Creating a lifelike sinusoidal flag animation or flutter effect using SVG格式

I'm attempting to create a lifelike animated svg flag that flutters in the wind. Currently, I am using this simple flag base: <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="100px" viewBox="0 0 200 100" > <p ...

htmlcssanimationsvgsmil

Delay the execution using Javascript/jQuery, remove the last element from the DOM

Within a jQuery AJAX call, I am using a $.each() loop. Each element in the response data triggers the addition of a portion of HTML to a container class in my index.html file. To view the code and ensure proper formatting, visit the codepen here as the pa ...

javascriptjqueryhtmlcss

Preventing button movement during navigation collapse toggle click

I am working on setting up my navbar in the following way: [collapse] navbar icon links sign in button Although I have successfully set this up, the issue is that when the navbar collapse toggle is clicked, it shifts the sign-in button u ...

htmltwitter-bootstrapbootstrap-5