The carousel in the Project file seems to be malfunctioning

Question

The carousel in the Project file seems to be malfunctioning

Having previously utilized Owl carousel on my website, I made the switch to slick carousel for the slider on a NATA coaching center in Chennai. Unfortunately, I'm encountering issues with getting the slider to work and I'm unsure of where I may be making mistakes. All images are currently displayed in a flex-column format, but I desire it to resemble a vertical slider. Below is an example of how I envision it:

https://i.sstatic.net/HGiBN.png

To achieve a vertical slider using slick, you can refer to this Codepen.

$(document).ready(function(){

$('.items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});

.contact-card {
background-color: #88206D;
border: solid 2px #fff;
border-radius: 21px;
min-height: 406px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.5);
}

#google-icon img {
height: 44px;
z-index: 1000;
background-color: #fff;
padding: 5px;
border-radius: 22px;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.53);
-webkit-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.53);
-moz-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.53);
margin-top: 24px;
margin-bottom: 60px;
}

.google-review {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
margin-bottom: 60px;
}

.col-1 {
display: flex;
flex-direction: column;
align-items: center;
}

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87f4ebeee4ecaae4e6f5e8f2f4e2ebc7b6a9bfa9b6">[email protected]</a>/slick/slick.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/kenwheeler/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99eaf5f0faf2d9a8b7a1b7a8">[email protected]</a>/slick/slick-theme.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="40332c29232b6d2321322f3533252c00716e786e71">[email protected]</a>/slick/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<main>
<div class="container">
<div class="row contact-card">
<div class="map col-5" id="map"></div>
<div class="offset-2 image-scroll"></div>
<div class="map-des col-3 text-white my-auto pt-4" id="m-des"></div>

<!-- i struggle in this part -- >

<!-- google reviews -->
<div class="col-1 text-center">
<div id="google-icon">
<img src="https://i.ibb.co/nknMt4k/search.png" class="google-icon">
</div>


<div class="side-star">
<p class="google-review text-nowrap">
Special thanks to  Julie Porosky from Ironistic!
</div>
</div>
</div>

<!—Struggling here —>

  </div>;
    </div>;             
            <div >
              <h1>This is a test</h1>  
          </div> 
 
        </div> 
   </div>


          Code:
          <div > do something <
          
    </div>



</section_20_open>
        
      <div class="container-open-left-sidebar-close wantItLeft"-->
      
           notice close message
        
                   same thing 

                   ok two done


                    
</storyittle_info_plate-->

javascript html css bootstrap-4

Answer 1

Answer №1

To implement this code, you will need to add CSS styles as well.

$(document).ready(function() {

    $('.row', '.container').slick({
        verticalScrolling: true,
        vertical: true,
        slidesToShow: 1,
        slidesToScroll: 1,
    });
});

* {
    padding: 0;
    margin: 0;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

button:focus {
    outline: none !important;
}

button {
    display: inline-block;
    padding: 0;
    margin: 0;
    line-height: 1;
    text-align: center;
    border: none;
    background: none;
    cursor: pointer;
}

img {
    max-width: 100%;
}



.container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.row {
    position: relative;
    overflow: hidden;
}

.container .item {
    float: left;
    text-align: center;
}

.row .item img {
    display: block;
    margin: 0 auto;
}

.slick-no-slide .slick-track {
    width: 100% !important;
    text-align: center;
    transform: inherit !important;
}

.slick-no-slide .slick-slide {
    float: none;
    display: inline-block;
}

.slick-list {
    position: relative;
    overflow: hidden;
}

.slick-dots {
    text-align: center;
}

.slick-dots li {
    display: inline-block;
}

.slick-dots li button {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    font-size: 0;
    background-color: grey;
    border-radius: 50%;
    border: none;
}

.slick-dots .slick-active button {
    background-color: black;
}

.slick-prev {
    right: 10px;
    /* Add custom image URL for the previous button here */
}

.slick-next {
    left: 10px;
    /* Add custom image URL for the next button here */
}

.slick-arrow {
    position: absolute;
    top: 48%;
    z-index: 1;
    width: 15px;
    height: 30px;
    font-size: 0;
    background-size: 100% 100%;
}

I removed div.items since it didn't have any styling and was not covering div.item. The parent should be div.slick because that's where you are applying the styles in JavaScript. Please replace the placeholder URLs in .slick-next and .slick-prev with images of your choice for the buttons.

Answer 2

To implement this code, you will need to add CSS styles as well.

$(document).ready(function() {

    $('.row', '.container').slick({
        verticalScrolling: true,
        vertical: true,
        slidesToShow: 1,
        slidesToScroll: 1,
    });
});

* {
    padding: 0;
    margin: 0;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

button:focus {
    outline: none !important;
}

button {
    display: inline-block;
    padding: 0;
    margin: 0;
    line-height: 1;
    text-align: center;
    border: none;
    background: none;
    cursor: pointer;
}

img {
    max-width: 100%;
}



.container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.row {
    position: relative;
    overflow: hidden;
}

.container .item {
    float: left;
    text-align: center;
}

.row .item img {
    display: block;
    margin: 0 auto;
}

.slick-no-slide .slick-track {
    width: 100% !important;
    text-align: center;
    transform: inherit !important;
}

.slick-no-slide .slick-slide {
    float: none;
    display: inline-block;
}

.slick-list {
    position: relative;
    overflow: hidden;
}

.slick-dots {
    text-align: center;
}

.slick-dots li {
    display: inline-block;
}

.slick-dots li button {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    font-size: 0;
    background-color: grey;
    border-radius: 50%;
    border: none;
}

.slick-dots .slick-active button {
    background-color: black;
}

.slick-prev {
    right: 10px;
    /* Add custom image URL for the previous button here */
}

.slick-next {
    left: 10px;
    /* Add custom image URL for the next button here */
}

.slick-arrow {
    position: absolute;
    top: 48%;
    z-index: 1;
    width: 15px;
    height: 30px;
    font-size: 0;
    background-size: 100% 100%;
}

I removed div.items since it didn't have any styling and was not covering div.item. The parent should be div.slick because that's where you are applying the styles in JavaScript. Please replace the placeholder URLs in .slick-next and .slick-prev with images of your choice for the buttons.

The carousel in the Project file seems to be malfunctioning

Answer №1

Similar questions

What could be causing the error message "userID is not defined" to appear?

The ng-click function is not functioning as intended

How about this: "Using jQuery, we detached the element with the class 'myClass', then cloned it. But wait, where did my nested table go?"

Retrieving data from an array using an AJAX request function

Tips for increasing efficiency in Javascript development by leveraging the power of the computer to automate tasks and minimize manual work

Transform unidentified individuals into authenticated users using Firebase Authentication for Google

Tips for indicating request parameters in Drive.Comments.list

Is there a way to successfully integrate a JavaScript file that has been downloaded from `npm` or `yarn` into a web client or

Submitting modal form information using AJAX to PHP

How to use jQuery to extract a particular text from an anchor tag

Utilizing Vue.js components and properties to invoke a function

Transitioning with an ellipsis

utilize console.log within the <ErrorMessage> element

Tips for testing a service in Angular using unit testing techniques

What is the best method to retrieve JSON data from a Rest API?

Implementing automatic dark mode activation during nighttime with jQuery or JavaScript

Can someone provide guidance on iterating through a nested array in d3 and appending child elements accordingly?

The ul class is not aligned with the website logo

Ensure that the responsive SVG image remains centered even when resizing

How to position two divs next to each other using CSS with just one adjustment