Custom CSS using IDs for each slide not updating before/after slides appropriately

[ghost]

Hello,

I have made two slides on one page ids and trying to style them differently using css and the simple js options that you have in your demo. But when adding my id that I assigned to each slider it doesn't apply the styles to the before and after slides that I explicitly set.

Here is some of my css that I put in my-custom-bee3d-styles.css:

#slideshow-three-cans > .bee3D--slide > .bee3D--after,
#slideshow-three-cans .bee3D--slide > .bee3D--before,
#slideshow-three-cans .bee3D--effect__classic .bee3D--after,
#slideshow-three-cans .bee3D--effect__classic .bee3D--before{
    opacity:1 !important;
}
#slideshow-three-cans .bee3D--effect__classic .bee3D--after-1,
#slideshow-three-cans .bee3D--effect__classic .bee3D--before-1 {
    opacity:1 !important;
}
#slideshow-three-cans .bee3D--effect__classic .bee3D--after-2,
#slideshow-three-cans .bee3D--effect__classic .bee3D--before-2 {
    opacity:0;
}

#slideshow-three-cans .bee3D--effect__coverflow .bee3D--after {
    -webkit-transform: translateX(144px) scale(0.8);
    transform: translateX(144px) scale(0.8);
    opacity:1;
}

/** BEFORE CURRENT ACTIVE SLIDE **/
#slideshow-three-cans .bee3D--effect__coverflow .bee3D--before {
    -webkit-transform: translateX(-144px) scale(0.8);
    transform: translateX(-144px) scale(0.8);
}

/** all can styles **/
#slideshow-all-cans .bee3D--slide {
    width: 144px;
    height: 430px;
    top: 50%;
    left: 100px;
    margin-left: 0;
    margin-top: -200px;
    opacity:1;
}

/** AFTER CURRENT ACTIVE SLIDE **/
#slideshow-all-cans .bee3D--effect__coverflow .bee3D--after,
#slideshow-all-cans .bee3D--effect__coverflow .bee3D--before{
    opacity:1;
}
#slideshow-all-cans .bee3D--effect__classic .bee3D--after-1,
#slideshow-all-cans .bee3D--effect__classic .bee3D--before-1 {
    opacity:1;
}
#slideshow-all-cans .bee3D--effect__classic .bee3D--before-2,
#slideshow-all-cans .bee3D--effect__classic .bee3D--after-2{ 
    opacity:1;
}

#slideshow-all-cans .bee3D--effect__coverflow .bee3D--after {
    -webkit-transform: translateX(144px) scale(0.8);
    transform: translateX(144px) scale(0.8);
    opacity:1;
}

/** BEFORE CURRENT ACTIVE SLIDE **/
#slideshow-all-cans .bee3D--effect__coverflow .bee3D--before {
    -webkit-transform: translateX(-144px) scale(0.8);
    transform: translateX(-144px) scale(0.8);
}

/** general styles **/
.bee3D--nav {
    z-index:99;
}

/** end three can styles **/
@media screen and (max-width:767px){
    .bee3D--slide__active a .can {
    transform:scale(1.1) !important;
    }
}

I can't get the opacity to be 1 for my three-can-slideshow. But for the all 6 can slideshow its working fine. Any help would be appreciated!

[ghost]

I'm guessing the id's are not overriding the general global styles. Is there a work around?

[lukeed]

Hey, I've updated your comment for CSS highlighting.

There's a few issues with your CSS.

1) Your opacity rule for bee3D--{after,before}-2 is overwritten by bee3D--{after,before}.

All `--{after,before}-*` classes also have the `--{after,before}` class. Your first block of code forces everything to have `opacity: 1` because of the `!important` flag. You need to either remove this block, or make the `*-2` rule have an `!important` flag too.

2) You don't need to repeat these rules for the all-cans slider:

```css
#slideshow-all-cans .bee3D--effect__classic .bee3D--after-1,
#slideshow-all-cans .bee3D--effect__classic .bee3D--before-1 {
    opacity:1;
}
#slideshow-all-cans .bee3D--effect__classic .bee3D--before-2,
#slideshow-all-cans .bee3D--effect__classic .bee3D--after-2{ 
    opacity:1;
}
```

3) (TIP) You don't need to include the effect's classname in your rules.

4) If all you want is for the three-cans slides to be opacity:1, then this should do it:

```css
#slideshow-three-cans .bee3D--slide {
  opacity: 1 !important;
}
```

If that doesn't work, I would need to see your HTML markup. It means your structure & selector don't match, or you have another rule somewhere that's overwriting this one.

Hope that helps!

[ghost]

Hello,

Two of my slides are rotating at the same time for some reason, it seems like it is the -before and after-3 that are doing it causing issues. Also it seems like the slideshow container doesn't seem to stay in place even when calling the parent div.

[ghost]

This seems to happen when they both reset from one side to the other.

[lukeed]

At this point I can't help you with the amount of information provided. If you have a link I can look at, that'd be the best way to continue.

[ghost]

Sure can I email you the link and login credentials?

[lukeed]

Sure! https://themeforest.net/user/lukeed (right side)

[lukeed]

Closing this now that we've taken to emails~