Slick slider malfunctioning within bootstrap 4 framework

Despite following the instructions on the official slick slider website, I am encountering an issue where the slider is not working as expected. Instead of sliding through the images, they are being displayed on top of each other.

Here is the code I have used:

Head elements

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

Body elements

<div class="col-sm-12">
    <div class="autoplay">
        <div><img src=".\slickpics\cookie1.png"></div>
        <div><img src=".\slickpics\cookie1.png"></div>
        <div><img src=".\slickpics\cookie1.png"></div>
        <div><img src=".\slickpics\cookie1.png"></div>
        <div><img src=".\slickpics\cookie1.png"></div>
        <div><img src=".\slickpics\cookie1.png"></div>
        <div><img src=".\slickpics\cookie1.png"></div>
        <div><img src=".\slickpics\cookie1.png"></div>
        <div><img src=".\slickpics\cookie1.png"></div>
    </div>
</div>

Before body closing elements

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-migrate-3.1.0.min.js" integrity="sha256-ycJeXbll9m7dHKeaPbXBkZH8BuP99SmPm/8q5O+SbBc=" crossorigin="anonymous"></script>
<script type="text/javascript" src="/slick/slick.min.js"></script>

The javascript at the end

$(document).ready(function(){
    $('.autoplay').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      infinite: true,
      autoplay: true,
      autoplaySpeed: 2000,
    });
});

I would greatly appreciate any help or suggestions regarding this issue. Thank you for your time.

Answer №1

There was a duplication of the jQuery CDN, with one for bootstrap and another for slickslider. I successfully resolved this problem by removing the duplicate from slickslider.

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

Exploring the depths of cURL and PHP beyond the basics

After realizing that my previous question was not quite right, I am back with a more accurate one. This time, I am working with cURL in PHP and trying to access a website. However, every time I change the site, the browser sends a value x to the server. If ...

I am having trouble getting Google Maps to load

Why does the map on my website only load when the browser window is resized? Below is the JavaScript code being used: <div class="map-cont"> <div id="map" class="location-container map-padding" style="width:100%;height:400px;background:y ...

Using code, you can implement this by utilizing the following URL: https://graph.facebook.com/ql?q=http://google.com

(PLEASE AVOID CLICKING NEGATIVE RATINGS. I REALLY NEED AN ANSWER TO THIS. THANK YOU) As a beginner in coding and learning, I am eager to edit the code on my website. The code/link https://graph.facebook.com/fql?q=http://google.com has already been depreca ...

Avoid the situation where the prop overrides the existing data

I am facing a challenge with vue.js as a beginner. I have an array filled with objects that I send through props to my router-view. Within one of my router-view components, I am using this array in multiple functions by referencing it with 'this.data ...

Combining two interconnected documents in Mongoose: merging references

Currently, I am in the process of learning how to work with NoSQL after having a background in relational databases. For this specific project, I am utilizing Express along with Mongoose. The main challenge I am facing involves callbacks when attempting t ...

Mastering various mathematical operations in Vue.js

I am attempting to calculate the percentage of a value and then add it back to the original value using Vue.js. Here is an example: 5 / 100 * 900 + 900 = 945.00 (standard calculation) 5 / 100 * 900 + 900 = 90045 (Vue.js calculation) This is the code I ha ...

What is the process for sending body data through Swagger in a Node.js/Express environment?

Below is the configuration for my swagger: /** * @swagger * /api/addData: * post: * consumes: * - text/html * produces: * - text/html * parameters: * - name: author * in: body * required: true * ...

What is the best way to apply "display: none;" on a span element nested within a title attribute?

I am utilizing the social-share-button gem to share blog posts on social media. The website has been internationalized, making it bilingual (English and German). Everything is functioning correctly, but I encounter an issue with the social share buttons wh ...

What is the best way to remove a specific item from a list of maps in DynamoDB based on a particular attribute value within the

Below is an example of a list I have: { "favorites": [ { "createdAt": 1448998673852, "entityId": "558da3de395b1aee2d6b7d2b", "type": "media" }, { "createdAt": 1448998789252, "entityId": "558da3de395b1aee2d6b7d83 ...

Sliding to alter the vertex coordinates

Seeking help to dynamically change the x and y position of the first vertex in a triangle using sliders on datgui. Below is my code, can someone help me figure out what I'm doing wrong by assigning variables inside animate()? I've been struggling ...

We encountered an issue while trying to bootstrap react with the './node_modules/bootstrap/dist/js/bootstrap.min.js' module. The error was a result of the module not being able

Error : I encountered a problem when trying to add a navbar using Bootstrap. Without importing the jQuery part, the navbar works but the collapsing feature does not work. However, when I add the jQuery part, I receive the following error: ./node_modules ...

Using jquery to toggle the visibility of input fields

I'm encountering an issue with this straightforward code snippet: $("#additional-room").hide(); var numAdd = 0; $("#add-room").click(function(e) { e.preventDefault(); $("#additional-room").show(""); if (numAdd >= 3) return; numAd ...

Extract the email address from the HTML source code obtained through a GET AJAX request

An interesting scenario arises when the following code is executed from www.example.com. It fetches the complete html source code of www.example.com/example.html and displays it in an alert message. function process(){ url = "http://www.example.com/ex ...

Display input checkboxes using ng-repeat based on dynamically changing conditions

My goal is to dynamically display checkboxes with labels based on a conditional flag. The label values are defined as: $scope.listA = [ { name : "Sample 1" }, { name : "Sample 2" } ]; $scope.listB = [ { name : "Result 1" } ...

I'm having some trouble with this search filter in Vue 2 - is it failing to display the items as expected

After struggling with this issue for over a week, I've hit a roadblock and need some assistance. I'm currently working on implementing a search filter in Vue 2 with Vuetify, but something isn't quite right. Here's a snippet of the sea ...

How can I create a custom Sweet Alert button in JavaScript that redirects to a specific webpage when clicked?

Here's what I have in my code: swal({ title: 'Successfully Registered!', text: "Would you like to proceed to the Log In page?", type: 'success', showCancelButton: true, confirmButtonColor: '#308 ...

Tips for efficiently managing imports in a React application that utilizes three.js without relying on the window object

Issue: Imagine I am working on a React application that includes a 3D component on one side and various UI components on the other side. The 3D aspect of the project involves using three.js, and for reference, let's say I want to replicate this part ...

Navigating through intricate JavaScript objects

I am working with an object that looks like this: var obj = { "00a9": ["\u00A9", ["copyright"]], "00ae": ["\u00AE", ["registered"]], "203c": ["\u203C" ...

"Utilizing GroupBy and Sum functions for data aggregation in Prisma

I am currently working with a Prisma schema designed for a MongoDB database model orders { id String @id @default(auto()) @map("_id") @db.ObjectId totalAmount Int createdAt DateTime @db.Date } My ...

Guide to creating a distortion-free layout with Bootstrap 4

I am in need of creating a design layout using Bootstrap 4 with the following specifications: https://i.sstatic.net/JeUHh.png Here is my code : <div class="row"> <div class="col-md-7"> A </div> <div class="col-md-5"> <div ...