Creating a slider with a large central image and just three slides that automatically transition

I am trying to create a slider that includes:

  • 3 different images
  • 3 different text captions
  • A button that opens a modal dialog similar to Bootstrap, with each slide's button displaying unique text in the modal
  • The slider should automatically slide

For reference, please view this screenshot of the slider image

$(".center").slick({
    dots: true,
    infinite: true,
    centerMode: true,
    slidesToShow: 3,
    slidesToScroll: 3,
    autoplay: true,
    speed: 300,
    dots: true,
    arrows: true
  });
html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/kenwheeler/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1928d88828aa1d0cfd9cfd1">[email protected]</a>/slick/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/gh/kenwheeler/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="52213e3b313912637c6a7c">[email protected]</a>/slick/slick-theme.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/gh/kenwheeler/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6516090c060e25544b5d4b">[email protected]</a>/slick/slick.css" rel="stylesheet"/>



<div class="slider-inner">
    <section class="center slider">
       <div>
           <img src="http://placehold.it/350x300?text=1">
       </div>
       <div>
          <img src="http://placehold.it/350x300?text=2">
       </div>
        <div>
           <img src="http://placehold.it/350x300?text=3">
       </div>
   </section>
</div>

Just a note: I am using Bootstrap 4.5 in my project.

I would appreciate some help as I am new to this area and this is for a school project.

javascripthtmlcssbootstrap-4bootstrap-modal

Answer №1

Congratulations!

Now, the only thing left to do is adjust the slidesToShow property in the settings. Even though you can see 3 slides in the image, only 1 slide is actually active.

This is because the centerMode is set to true, causing the entire slider to offset to the center and display a glimpse of the previous and next slide.

Take a look at the example provided below. 

$(".center").slick({
  dots: true,
  infinite: true,
  centerMode: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  speed: 300,
  dots: true,
  arrow: true
});
html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.slider {
  width: 50%;
  margin: 100px auto;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-slide {
  transition: all ease-in-out .3s;
  transform: translate3d(20%, 0, 0) scale(0.8);
  opacity: .2;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  transform: scale(1);
  opacity: 1;
}

.slick-current ~ .slick-slide {
  transform: translate3d(-20%, 0, 0) scale(0.8);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/kenwheeler/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97e4fbfef4fcd7a6b9afb9a7">[email protected]</a>/slick/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/gh/kenwheeler/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfacb3b6bcb49feef1e7f1ef">[email protected]</a>/slick/slick-theme.css" rel="stylesheet" />
<link href="//cdn.jsdelivr.net/gh/kenwheeler/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ffce3e6ece4cfbea1b7a1bf">[email protected]</a>/slick/slick.css" rel="stylesheet" />

<div class="slider-inner">
  <section class="center slider">
    <div>
      <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=2">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=3">
    </div>
  </section>
</div>

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

Whole page scrolling instead of just inner div scrolling

Once again, I find myself tinkering with CSS... In the current setup, the map container is scrolling on its own, separate from the rest of the content within the container. How can I enable the entire page to scroll when additional content is added to the ...

htmlcsslayout

Tips for resolving the error: finding the right loader for handling specific file types in React hooks

data = [{ img: '01d' }, { img: '02d' }] data && data.map((item) => ( <img src={require(`./icons/${item['img']}.svg`).default} /> )) I am facing an issue with the message Error: Module parse failed: U ...

javascriptreactjstypescriptnext.js

Track the number of views each month using PHP and MySQL to generate dynamic jQuery charts

I am currently utilizing jQuery with chart.js to display the view counter based on month using PHP and MySql. Each page view is inserted into MySql in the following format : | id | ip | page | date(timestamp) | | 1 | 138.86.20.20 | test.p ...

javascriptphpjquerymysqlchart.js

Please ensure that the menu is included within the HTML file

How can I include a menu from menu.html into index.html? The content of menu.html is: <li><a href="home.html">Home</a></li> <li><a href="news.html">News</a></li> In index.html, the code is: <!docty ...

javascriptjquery

Ways to customize the background color of child cells in a table

I've implemented material-table in this UI and I'm currently working on customizing the style of specific cells only when the onTreeExpandChange is true. Essentially, my goal is to change the background color for cells 2 & 3. Check out the s ...

cssreactjsmaterial-uimaterial-table

Choose a specific option from the dropdown menu using a URL parameter

After reviewing this code snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> // <![CDATA[ $(document).ready(function() { // Parse your query parameters here, and assi ...

javascripthtmljqueryforms

What is the best way to obtain a reference to the parent form element within an AngularJS directive?

Here is the HTML code I am working with: <form name="my-form"> <div class="col-sm-4"> <input type="phone" name="mobileNumber" ng-model="form.mobileNumber" value="0439888999" required> </div> </form> In addition, I ha ...

javascriptjqueryangularjs

How to change the background color of select options using JQuery

My webpage includes multiple select boxes with different options: <select name="item-0-status" id="id_item-0-status"> <option value="">---------</option> <option value="1">Online</option> <option value="2">Offline</o ...

jquerycss

What is the best way to create a seamless background transition for buttons on a mobile device?

Currently, I am working on my random quote generator project and I am trying to make it so that when the button is touched on a mobile device, the background color becomes semi-transparent. Below is the code I am using: #loadQuote { position: fixed; w ...

htmlcssfrontend

Having trouble sending a POST request from my React frontend to the Node.js backend

My node.js portfolio page features a simple contact form that sends emails using the Sendgrid API. The details for the API request are stored in sendgridObj, which is then sent to my server at server.js via a POST request when the contact form is submitted ...

javascriptnode.jsreactjs

"Discovering issues with the functionality of Antd Table's search and reset capabilities

I'm currently working on integrating search and reset functions in an Antd table. However, I am encountering an issue with the reset (clearAll) function as it does not revert the table back to its initial state when activated. The search functionality ...

javascriptreactjstypescriptantd

In ReactJS with Bootswatch, the font styles are not applied

I have experimented with various methods to apply this font, but it is still not functioning correctly. @font-face { font-family: 'Samim'; src: local('Samim'), url(./resources/fonts/Samim.ttf) format('truetype'); fon ...

cssreactjsfontsbootswatch

A guide to positioning the content of an Angular tag within a span element

Can someone help me figure out how to properly align the PO number and Vendor information on my page? from PO Number: 344 Vendor: yu PO Number: 3445 Vendor: yu PO Number: 344 Vendor: yu to PO Number: 344 Vendor: yu PO Number: 3445 Vendor: yu PO Num ...

htmlcssangular

gRaphael - the struggle of animating a line chart

Encountering an issue with the gRaphael javascript line chart library. Creating a line chart from a CSV file with five columns (# of minutes, time, waiting time, in treatment, closed, in location). Previously drew full chart without animation successfull ...

javascriptjqueryraphaelconflictgraphael

"Transitioning seamlessly from one element to another in the script

How can I transition from one function to another function in a script element? How do I transfer the field validator value to the second function? <script> $('#card_number').validateCreditCard(function(result) { if ...

javascriptnode.js

Unique arrangement of hexagons in a honeycomb layout with precise centering

Currently, I am having trouble creating hexagonal blocks with content in a specific layout. My goal is to have four blocks starting with one at the top, followed by a row of two, and finishing with a row of one as shown in the image below. Unfortunately, a ...

cssresponsive-designhexagonal-tiles

Create unique error messages using Vue validators

Two fields named text and email are included in my template. Below is the structure of the template: HTML <!DOCTYPE html> <html> <head> <title>Vue - Validations</title> <script src="Libraries/vue/vue.min.js&qu ...

javascriptvue.jsvalidationvue-validator

Height set at 100% but not extending to the entire parent element

I've applied min-height: 100vh; to the body, and then height: 100% to the main element. However, the height of the main does not extend fully to its parent container. Could someone please help me understand why this is happening? Thank you. I'v ...

css

The functionality of HTML5 Camera is experiencing issues while being used with Tomcat7

My Angular2 project includes HTML5 camera access functionality. I launch the project using Angular CLI (ng serve), which starts the web container for testing purposes. When trying to access the camera, the browser prompts me for permission. Once granted, e ...

javascripthtmlcamera

Can using .wrap( ) negate the styling effects of the wrapper?

I am struggling with centering a button on my webpage. Currently, I have the following code for creating the button: var button = ($('<button>', { "id": "jspsych-free-sort-done-btn", "class": "jspsych-free-sort", ...

jqueryhtmlcsstext-align