Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Can clones of the previous and next slides be displayed using this module?
I would like to have the current slide bookended by the next and previous slides which would be set at different opacity - the viewport would be centered with the current slide displayed in 100%. Three slides would be visible but the other two would be grayed out.
Currently I'm using the slider to display one slide and used css to set overflow: visible to the viewport. Now three slides are displayed but I can't figure out how to set the opacity differently for the previous and next slides.
I am not using views-slideshow.
Thanks!
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | default.PNG | 323.84 KB | sokrplare |
| #2 | explicit-li-widths.PNG | 456.57 KB | sokrplare |
| #2 | explicit-img-width-plus-li-opacity.PNG | 576.05 KB | sokrplare |
Comments
Comment #1
minorOffense CreditAttribution: minorOffense commentedYou could try the carousel functionality and add some custom styling to the page to attempt to get the effect you're going for. You could look at the nth-child selector in CSS3 to set the opacity on the slides. Or look at it in reverse, set all your slides to a certain opacity except the active one.
Other than that though I can't think of anything in the library which would help get that working out of the box. Let me know if you come up with a solution!
Comment #2
sokrplare CreditAttribution: sokrplare commentedI was just doing a proof-of-concept - will hopefully get to circle back around to this pre-launch of the site. In the meantime maybe this helps. I have no clue if/how this would work once the slideshow starts sliding - I only did it on the currently displayed imagse. Guessing you'll need to use the FlexSlider callbacks to hook in and add/remove these settings on the fly each time it moves.
I've ignored margins for now. Would definitely make it look nicer at the end there.
Default carousel
Explicit li-element widths
Set the center li to 200px wider; set the right and left li's to 100px smaller.
Explicit right and left img-element widths
Set the right and left img widths to match the center li width; also threw a 50% opacity on the right and left li's for styling.
Comment #2.0
sokrplare CreditAttribution: sokrplare commentedextra information about my configuration