Creating a Gradient Effect for Partial Next Slide on Slick Slider using Bootstrap 4

I am currently designing a responsive carousel using Bootstrap-4 and slick.js. With the center-mode enabled, I noticed that it shows a partial next slide. I am interested in adding a gradient to this partial next-slide, but I am uncertain about how to accomplish this based on the documentation.

If you are able to assist me with this issue, please click [here] (https://codepen.io/bzaidi/pen/MWamJvZ)

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

      <link rel="stylesheet" href="https://use.typekit.net/div7rpa.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"
  integrity="sha256-DHF4zGyjT7GOMPBwpeehwoey18z8uiz98G4PRu2lV0A="
  crossorigin="anonymous"></script>
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"
  integrity="sha256-4hqlsNP9KM6+2eA8VUT0kk4RsMRTeS7QGHIM+MZ5sLY="
  crossorigin="anonymous"/>
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"
  integrity="sha256-UK1EiopXIL+KVhfbFa8xrmAWPeBjMVdvYMYkTAEv/HI="
  crossorigin="anonymous"/>

           <script type="text/javascript">
  $(document).ready(function() {
    $('.whatsNextSlick').slick({
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 1,

        responsive: [
               {
                breakpoint:767,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    infinite:true,
                   centerMode: true,
                    centerPadding: '20%'
                }

            }

//            {
//                    breakpoint:980,
//                    settings: {
//                    slidesToShow: 2,
//                    slidesToScroll: 1,
//                    infinite:true
//                  
//                }
//            
//                
//            }



        ]
    });



  });
</script>

      <style type="text/css">

              .whats-next-container{
          background-color: rgba(188,161,204,0.1);
          /* Add your custom styles here */

    }

    .whats-next-container .insideContainer{
        background-color:#FFFFFF;
        max-width:290px;

    }

    .whats-next-container .leftContent img{
       float:left;
       clear:left;
        margin-right:14px;
    }

     .whats-next-container .rightContent {
      height:159px;
    }

     .whats-next-container .rightContent h4{
        padding-top: 14px;
        padding-right:20px;
        /* Add your custom styles here */
    }

    .whats-next-container .rightContent h4 {
        padding-top: 14px;
        padding-right: 20px;
        font-family: Beausite Fit Regular;
        line-height: 22px;
        font-size: 17.5px !important;
        letter-spacing: -0.48px;
        text-align: left;
        color: #41173F;
        /* Add your custom styles here */
    }


    .whats-next-container .rightContent a.whatsNextLink{
        display:flex !important;
        margin-bottom:20px;
        margin-top:30px;
        border:0px;
    }




.whatsNextSlick .slick-prev,
.whatsNextSlick  .slick-next{
    background:transparent;
    border-radius:0;

}



.whatsNextSlick  .slick-prev {
    left: -25px;
}

.whatsNextSlick .slick-next {
    right: -25px;
}

.whatsNextSlick .slick-prev,
.whatsNextSlick .slick-next {
    width: 30px;
    height: 30px;
}

.slick-prev:before {
    content: '‹';
}

.slick-next:before {
    content: '›';

}

.slick-next:before,
.slick-prev:before {
    font-family: proxima-nova, sans-serif !important;
    color: #333;
    font-size: 30px;    
}





    @media(max-width: 767px) {
        .slick-list {
            padding-left: 0px!important; 
        }

    .whatsNextSlick .slick-prev, .whatsNextSlick .slick-next {
        background: transparent !important;
        top: 0;
        box-shadow: none;
        width:30px;
        height:30px;
        border-radius: 0;


     }
        .whatsNextSlick .slick-prev{
             right: 30px;
        left: unset;
        }

    }


/*         @media(max-width: 360px) and (min-width:320px)*/
    @media only screen and (max-width:320px)
         {

        .whatsNextSlick .leftContent img{
/*            width:40%*/
            height:159px;

        }

        .whats-next-container .rightContent h4 {
            padding-top: 5px;
            padding-right: 5px;
            font-family: Beausite Fit Regular;
            line-height: 17px;
            font-size: 14px !important;
            letter-spacing: -0.48px;
            text-align: left;
            color: #41173F;
        }

        .whats-next-container .rightContent a.whatsNextLink {
            display: flex !important;
            margin-bottom: 0px;
            margin-top: 15px;
            border: 0px;
        }

    }



        @media(max-width: 375px) and (min-width:360px) {

        .whatsNextSlick .leftContent img{
/*            width:40%*/
            height:159px;

        }

        .whats-next-container .rightContent h4 {
               padding-top: 10px;
                padding-right: 11px;
                font-family: Beausite Fit Regular;
                line-height: 17px;
                font-size: 17.5px !important;
                letter-spacing: -0.48px;
                text-align: left;
                color: #41173F;
        }


       .whats-next-container .rightContent a.whatsNextLink {
            display: flex !important;
            margin-bottom: 0px;
            margin-top: 15px;
            border: 0px;
            }

    }



     @media(max-width:980px) and (min-width:900px) {
            .whats-next-container .rightContent h4 {
            padding-top: 6px;
            padding-right: 5px;
            font-family: Beausite Fit Regular;
            line-height: 18px;
            font-size: 15.5px !important;
            letter-spacing: -0.48px;
            text-align: left;
            color: #41173F;
        }

        .whats-next-container .rightContent a.whatsNextLink {
            display: flex !important;
            margin-bottom: 20px;
            margin-top: 16px;
            border: 0px;
        }
        .whats-next-container .leftContent img {
            float: left;
            clear: left;
            margin-right: 10px;
        }
    }


      </style>
  </head>
  <body>




         <!-- What's Next Carousel -->

    <div class="container-fluid whats-next-container">


    <div class="container">
        <div class="row">
            <div class="col-md-12 d-block d-sm-flex">
                <div class="col-md-3 col-sm-12 d-flex flex-column align-items-center justify-content-center">
                    <h3>What's Next</h3>
                </div>
                <div class="col-md-9 col-sm-12 mb-4 mt-4">
                    <div class="whatsNextSlick">

                        <div class="slide1Container">
                            <div class="insideContainer">
                                <div class="leftContainer">
                                    <div class="leftContent">
                                          <picture>
                                            <source media="(max-width:767px)" srcset="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg" class="justBecause"/>
                                            <img src="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg"  class="justBecause" />
                                        </picture>
                                    </div>

                                </div>

                                <div class="rightContainer">
                                    <div class="rightContent">

<!--                                        <p class="heading">Our Mother's Day Gift Guide is out now!</p>-->
                                          <h4>Our Mother's Day Gift Guide is out now!</h4>
                                         <a href="#" class="btn-primary cta body-font whatsNextLink" >Browse Catalogue ›</a>
                                    </div>

                                </div>
                            </div>

                        </div>

                          <div class="slide1Container">
                            <div class="insideContainer">
                                <div class="leftContainer">
                                    <div class="leftContent">
                                       <picture>
                                            <source media="(max-width:767px)" srcset="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg" class="justBecause"/>
                                            <img src="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg"  class="justBecause" />
                                        </picture>
                                    </div>

                                </div>

                                <div class="rightContainer">
                                    <div class="rightContent">

                                        <h4>Our Mother's Day Gift Guide is out now!</h4>
                                         <a href="#" class="btn-primary cta body-font whatsNextLink">Browse Catalogue ›</a>
                                    </div>

                                </div>
                            </div>

                        </div>

                          <div class="slide1Container">
                            <div class="insideContainer">
                                <div class="leftContainer">
                                    <div class="leftContent">
                                          <picture>
                                            <source media="(max-width:767px)" srcset="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg" class="justBecause"/>
                                            <img src="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg"  class="justBecause" />
                                        </picture>
                                    </div>

                                </div>

                                <div class="rightContainer">
                                    <div class="rightContent">

                                        <h4>Our Mother's Day Gift Guide is out now!</h4>
                                         <a href="#" class="btn-primary cta body-font whatsNextLink">Browse Catalogue ›</a>
                                    </div>

                                </div>
                            </div>

                        </div>
                          <div class="slide1Container">
                            <div class="insideContainer">
                                <div class="leftContainer">
                                    <div class="leftContent">
                                        <picture>
                                            <source media="(max-width:767px)" srcset="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg" class="justBecause"/>
                                            <img src="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg"  class="justBecause" />
                                        </picture>
                                    </div>

                                </div>

                                <div class="rightContainer">
                                    <div class="rightContent">

                                        <h4>Our Mother's Day Gift Guide is out now!</h4>
                                         <a href="#" class="btn-primary cta body-font whatsNextLink">Browse Catalogue ›</a>
                                    </div>

                                </div>
                            </div>

                        </div>
                          <div class="slide1Container">
                            <div class="insideContainer">
                                <div class="leftContainer">
                                    <div class="leftContent">
                                          <picture>
                                            <source media="(max-width:767px)" srcset="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg" class="justBecause"/>
                                            <img src="https://i.postimg.cc/9MV0f4wd/whatsnew-image-01.jpg"  class="justBecause" />
                                        </picture>
                                    </div>

                                </div>

                                <div class="rightContainer">
                                    <div class="rightContent">

                                        <h4>Our Mother's Day Gift Guide is out now!</h4>
                                         <a href="#" class="btn-primary cta body-font whatsNextLink">Browse Catalogue ›</a>
                                    </div>

                                </div>
                            </div>

                        </div>



                    </div>
                </div>
            </div>
        </div>

    </div>     


    </div>


  </body>
</html>

If you have any insights or suggestions, please feel free to share. Thank you!

htmljquerycssbootstrap-4slick.js

Answer №1

When comparing your CSS classes to the documentation for slick.js, I made an interesting discovery:

Here, it was clear that the Slick.js Center Mode carousel sets the center slide as the current slide.

However, when testing your CodePen (which I tried locally), I noticed that the offset was shifted to the left (with the current slide appearing on the left side of the carousel and not centrally placed as expected in a centered mode).

What helped me solve this issue:

1. Initially, I copied the JS code from Slick.js Center Mode verbatim.

Why? To ensure correct behavior and maintain clean code.

Your customized JS had certain elements like centerMode: true removed from the main code section.

2. Create a visual representation of the desired outcome to identify areas for edits (CSS, JS?).

Here, I have illustrated the type of visual representation you should envision before starting any graphical customizations.

To create a gradient effect when slick.js applies its classes after loading the document, place the gradient UNDER the upcoming content.

Therefore, I used jQuery's insertBefore and insertAfter to wrap the slider.


$( "<div style='height:100%;width:100%;background-image: linear-gradient(to right, #000000, #2e2e2e, #585858, #878787, #b9b9b9, #b9b9b9, #b9b9b9, #b9b9b9, #878787, #585858, #2e2e2e, #000000);position:absolute;'>" ).insertBefore( "div.slick-slider" );
$( "</div>" ).insertAfter( "div.slick-slider" );

Edit 1: This essentially creates the Overlay div. You could also consider using the wrap jQuery function.

3. Next, customize the slick-slide and slick-center classes accordingly.


.slick-slide {
    opacity: .4;
}
.slick-center {
    display: block;
    max-width: 10% !important;
    max-height:20% !important;
    opacity: 1;
}

The opacity settings help reveal the underlying gradient.

Source:

4. Finally, here is a functional solution showcased in this CodePen demonstration.

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

Tips for avoiding re-rendering during onclick event handling

let content=useRef(); let toHide=useRef(); useEffect(()=>{ content.current=document.querySelectorAll('.content'); toHide.current=document.querySelectorAll('.hide'); toHide.current?.[0].addEventListener("cli ...

htmlreactjs

What is the best way to send form values to the server using Ajax and Jquery?

Is there a smart way to utilize Ajax and jQuery for sending all input values from a dynamically generated form to the server? Manually listing each input name in the Ajax post seems cumbersome, so I'm wondering if there's a more elegant solution? ...

jqueryajaxforms

Tips for relocating a div panel below all other div panels when a button is clicked with JQuery and CSS

There are several panels stacked below each other. Each panel has a button that, when clicked by the user, should move the panel to the bottom of the stack. For example: If there are 10 panels aligned sequentially and the user wants to remove Panel 2 by ...

javascriptjqueryhtmlcss

Overloading CometD with multiple publishes in a single call using Java and jQuery

Greetings, I am currently facing an issue while using the combination of cometd, jquery, and Java for testing purposes in broadcasting a message. Below is my web.xml configuration where I have utilized the Annotations implementation of cometd: <!-- Co ...

jqueryajaxcometcometd

Images in a JQuery slideshow have excessively large file sizes

Seeking a jquery slideshow that smoothly transitions images while using previous/next buttons. The challenge lies in the high-quality nature of the images, ranging from 200-300 KB each, and the quantity to be included. Any suggestions on how to address thi ...

jqueryslideshow

How can an accordion icon be added and list toggling be accomplished when HTML data is sourced from an API instead of a JSON response?

I have an API that sends HTML data as a response. The task at hand is to add accordion icons to the items in the list and enable list toggling using HTML, CSS, JavaScript, React, and MaterialUI. Unfortunately, I am limited in my options and cannot use JQ ...

javascripthtmlcssreactjsmaterial-ui

What is the best way to connect the elements in two separate arrays?

I have a scenario with two arrays and a variable: var Names = ['jack', 'peter', 'jack', 'john']; var Ids = ['1' , '2' , '3' , '4' ]; Also, I have this search varia ...

javascriptjqueryarraysobject

How can I effectively develop a versatile user interface for a website using Ruby on Rails that is compatible with all

Currently, I am in the midst of developing a web application using Ruby on Rails. Occasionally, I encounter challenges with cross-browser compatibility when it comes to CSS and Javascript. Are there any strategies you recommend to reduce these issues dur ...

javascriptcss

Retrieving information using an ajax request in JavaScript

Although this question may have been asked several times before, I have yet to find a satisfactory answer. I passed a URL in an Ajax call and I am trying to retrieve data from the database through a query in the success method of the Ajax request, but for ...

javascriptphpjqueryajaxlaravel-5

Upon loading the page, trigger the controller method by utilizing the information from the query string

Can query string data be retrieved on page load with javascript? Here is how I am attempting to achieve this in my project: The view page displays tabular data. When a button is pressed, it retrieves the row's id and invokes a javascript function. ...

javascriptjqueryasp.netasp.net-mvcasp.net-mvc-4

Are error messages in Bootstrap/Django lacking the color red?

I decided to experiment with messages in my Django application. Everything seemed to be working fine with all message types except the error messages not displaying in red. https://i.sstatic.net/0MJFw.png My code is quite simple. views.py from django.c ...

djangobootstrap-4

CSS: the enigmatic padding of absolute positioning within a table cell

I am encountering an unusual issue while attempting to position a div element absolutely inside a table-cell. In order to achieve absolute positioning, I utilize a wrapper div element with position:relative: HTML <table> <colgroup> ...

htmlcss

The information from the textarea and select option is not getting through to the email

Despite following suggestions, I am still unable to figure out why my form is not functioning properly. The form I have collects various information such as name, email, phone number, a select option, and a message in a textarea input. I dynamically change ...

javascriptphphtmlformstextarea

"Enhance Your Video Experience with a Custom

Currently, I am working on designing a front-page that features a YouTube video as the background with a fixed transparent navigation. Although I have successfully implemented both elements, I am struggling to make sure the video background starts at the t ...

cssvideobackgroundyoutube

Ways to ensure that ng-click is triggered exclusively on the click event

I am a beginner in Angular and attempting to toggle a class on click only for the current link. However, when I click, it is affecting all links instead of just the current one. I would like it to work only on the current element, similar to how we use "(t ...

javascriptjqueryangularjs

Creating interactive buttons in Angular 2

I am currently in the process of coding my own website and I've run into an issue with a button. Here's the code I'm working with: <div *ngFor="let game of games" class=card"> <div class="card-body"> <h5 class="card-t ...

htmlangular

What causes these images to stack on top of one another rather than align in rows? [HTML][CSS][Bootstrap]

I've implemented Bootstrap's grid system to showcase two rows, each containing two images. Here is the code: <section class="container"> <div class="row"> <figure class="column-sm-6"> <p>floor pl ...

htmlcssbootstrap-4

What is the significance of the colon found within a VueJS/Vuetify/HTML component tag?

Incorporating Vuetify into my project has led me to this VueJS, Vuetify, or HTML inquiry. The component in question displays as follows: <v-list-tile v-for="item in menuItem.items" :key="item.type" :style="`background: ${item.colour}`" :h ...

htmlvue.js

Retrieve the targeted row from the table and then employ a function

Here is a datatable that I am working on: http://jsbin.com/OJAnaji/15/edit I initially populate the table with data and display it. Then, I add a new column called "kontrole." data = google.visualization.arrayToDataTable([ ['Name', &apo ...

javascriptjqueryhtmlgoogle-visualization

JavaScript runtime error: Unforeseen exception code 0x800a138f has occurred

Encountering an exception when attempting to add a rule to a Radiobutton List using the rules() method. Error found at line 3747, column 3 in 0x800a138f - JavaScript runtime error: Unable to get property 'jQuery223064526755237397352' of undefin ...

javascriptjquery