Adding a Logo/Client Slider to Your Bootstrap Website

I'm currently working on a website and trying to incorporate a logo/client slider (linked here).

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Despite adding the HTML, CSS, and Javascript code, the slider isn't functioning correctly. Instead of an animated display of images, I only see a static list. How can I properly integrate this code? Thank you in advance!

Answer №1

Everything appears to be functioning correctly! Please see below:

$(document).ready(function(){
    $('.customer-logos').slick({
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 1500,
        arrows: false,
        dots: false,
        pauseOnHover: false,
        responsive: [{
            breakpoint: 768,
            settings: {
                slidesToShow: 4
            }
        }, {
            breakpoint: 520,
            settings: {
                slidesToShow: 3
            }
        }]
    });
});
h2{
  text-align:center;
  padding: 20px;
}
/* Slider */

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

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

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <h2>Our  Partners</h2>
   <section class="customer-logos slider">
      <div class="slide"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/colors-curl-logo-template_23-2147536125.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/abstract-cross-logo_23-2147536124.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/football-logo-background_1195-244.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/background-of-spots-halftone_1035-3847.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/retro-label-on-rustic-background_82147503374.jpg"></div>
   </section>
</div>

Answer №2

After experiencing a similar issue, I realized that loading jQuery after the slider was causing problems. Moving it above the slider resolved the issue, as demonstrated in this snippet:

If you're working with bootstrap 4.0, check out this example running on Bootstrap 4.0:

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

Adding new element to 2D array

I'm currently facing an issue while attempting to insert strings into a 2D array using Google Apps Script. The behavior I'm encountering is quite peculiar and I'm struggling to comprehend it fully. Below is a simplified version of the code t ...

Using jQuery to retrieve the location of an element with a specific class

I am working on a slider that adds a class (.current-item) to each active tab and removes it when it's inactive. I am looking to incorporate the LavaLamp effect for the menu, but I am having trouble getting the position of each element with the curren ...

Incorporating Jest to fake the Express Response.setHeader method: A guide

I developed a unique Express middleware that validates if the request content type is JSON. If it's not, the server will return a 415 error along with a custom error object. import { Request, Response, NextFunction } from "express"; functio ...

Angular momentum issue detected

Developing an android app with a search function that includes input type date. Attempted to parse the input date from 2017-5-10T17:00:00.000Z to 2017-5-10 using moment.angular. Although the search function works, it results in an error that prevents the a ...

What is the best way to increase the quantity of items in an array while simultaneously reducing the values of one or more specified keys for each object?

I have the following array: const disabledDays = [ { year: selectedDay.year, month: selectedDay.month, day: selectedDay.day -1 } ]; and I intend to pass it as a prop to a component: <DatePicker v ...

Employing JavaScript to overlay multiple transparent images on top of each other

I am envisioning a dynamic sandwich assembly tool where users can customize their sandwich by selecting different ingredients. By using radio buttons, I hope to visually display the sandwich taking shape as each ingredient is selected. Rather than creati ...

The click event listener declared with v-on inside a Vue Component fails to trigger

I am currently working on a Vue instance for a sidebar within my application that displays a list of menu items. In order to achieve this, I have created a local component with the following template structure: template:'<div><li class="cust ...

The object does not support the use of the dotdotdot method

Currently, I am working on implementing the dotdotdot plugin in my MVC project. Specifically, I am trying to use it within a table to limit certain rows to only displaying 3-4 lines of text. To achieve this, each row and column that may contain lengthy tex ...

Continuous loop of images displayed in a slideshow (HTML/JavaScript)

Greetings everyone, I am currently working on creating an endless loop slideshow of images for my website. Despite researching several resources, I am still struggling to get the code right. The issue I am facing is that only the image set in the HTML code ...

Sending arguments to Angular UI router template

My angular ui router is changing states/views as: $stateProvider .state({ name: 'home', url: '/', template: '<home-view></home-view>', }) Is it possible to ...

What is the recommended way to retrieve a "NA" value when the radio button is not chosen or unavailable?

I want to assign the value "NA" when no radio button option is selected. Currently, I am using the following code snippet: $("input[name='question']:checked").siblings('label').text(). However, this code returns a blank value if any rad ...

Why is my `$http` data not being sent in Angular JS?

Within my controller, I am initiating an http request as shown below: var postData = { action: 'getTasksByProjectSlug', slug: 'inbox' } $http({ url: 'http://localhost/toodloo/api/kernel.php', method: 'POST' ...

Utilize Ajax and Nodejs to inject dynamic content into your webpage

Seeking assistance in implementing a project where a navigation bar on the page contains various items, and I aim to display the content of each tab without reloading the entire page. Utilizing Nodejs with the ejs template engine, my research hasn't l ...

Transform the componentDidUpdate method that uses prevProps into a custom hook integrated with Redux

Trying to convert a life cycle method into a hook is not working as expected. When the component mounted, if the user ID exists in local storage, the user is connected and their name is displayed in the navbar. If they disconnect and reconnect, their name ...

Text area containing an unspecified value within a webpage featuring interactive forms

I'm struggling to understand why I can't access the field values on forms that are generated dynamically through AJAX and MySQL. The structure of the form template is as follows: <form class="dishform" id='" + d.dish_id + "FF' acti ...

Displaying PHP content using JavaScript classes

I have a popup feature implemented in JavaScript and all the necessary scripts added to my HTML page. I am attempting to load a PHP page in the popup when the submit button of my form is clicked. The popup is functioning correctly for buttons like the one ...

How to safely add multiple objects to an array in TypeScript & React without replacing existing objects - Creating a Favorites list

I'm in the final stages of developing a weather application using TypeScipt and React. The last feature I need to implement is the ability for users to add queried locations to a favorites list, accessed through the "favorites" page. By clicking on a ...

Can an image be scanned pixel by pixel to extract and store each pixel's color in an array mapped by its coordinates?

Currently, I am working on a browser game where I have created a pixel map as a coordinate system. Each color on the map represents a unique terrain type with specific values that impact different aspects of the game. I'm looking for a solution using ...

How can I dynamically change the default value of the selected option dropdown in React-Select when a new option is chosen?

Can you help me understand how to update the default displayed value on a dropdown in a react-select component? When I choose a different option from one dropdown, the select dropdown value does not change. I've attempted this.defaultValue = option.va ...

When using Python Selenium, we can see JavaScript in the view page source, but inspecting elements reveals the

I'm currently facing a challenge in accessing links to attachments for a web automation project. The issue lies in the fact that while I can view the HTML Code (divs and tables) when loading the webpage via Chrome and inspecting element, all I see in ...