Perpetual spinning of image grid

Are there any jQuery libraries available for continuous image rotation within an array? I have a collection of 30 partner logos that I would like to rotate continuously using either a jQuery library or plain CSS code. These images and information will be loaded through an AJAX query. An example of the desired vision can be seen here: https://i.sstatic.net/7MYZr.png

The layout could resemble the one in the example, or appear as a single line with uniform height.

I would appreciate any assistance and recommendations for further exploration.

jqueryhtmlcssbootstrap-4

Answer №1

There are numerous plugins available for achieving that functionality. One example is using slick (https://github.com/kenwheeler/slick/). Many carousels/sliders come with an option for continuous rotation. Simply search for a slider and load it with ajax before initializing.

Please note that Stack Overflow is not intended for seeking recommendations.

$(document).ready(function() {
  $('.slider').slick({
    dots: false,
    slidesToShow: 7,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1000,
    responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 6,
        slidesToScroll: 6,
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 5,
        slidesToScroll: 5
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 4
      }
    }
  ]
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5a6b9bcb6bef8b6b4a7baa0a6b0b995e4fbedfbe4">[email protected]</a>/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="23504f4a40480e4042514c5650464f63120d1b0d12">[email protected]</a>/slick/slick-theme.css" />
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f586999c969ed89694879a80869099b5c4dbcddbc4">[email protected]</a>/slick/slick.min.js"></script>

<div class="slider">
  <div><img src="https://picsum.photos/id/10/100/100"></div>
  <div><img src="https://picsum.photos/id/20/100/100"></div>
  <div><img src="https://picsum.photos/id/30/100/100"></div>
  <div><img src="https://picsum.photos/id/40/100/100"></div>
  <div><img src="https://picsum.photos/id/50/100/100"></div>
  <div><img src="https://picsum.photos/id/60/100/100"></div>
  <div><img src="https://picsum.photos/id/70/100/100"></div>
  <div><img src="https://picsum.photos/id/80/100/100"></div>
  <div><img src="https://picsum.photos/id/90/100/100"></div>
  <div><img src="https://picsum.photos/id/100/100/100"></div>
  <div><img src="https://picsum.photos/id/110/100/100"></div>
</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

Neglecting asynchronous Ajax functions once they have been called

I currently have a function that looks like this: $("#transfer").click(function(){ var token_rec = $("#token_rec").val(); var user_rec = $("#user_rec").val(); var subdomain_rec = $("#subdominio_rec").val(); var req_rec ...

javascriptjqueryajax

Using session variables can lead to decreased efficiency

Having an issue with session variables. I am looking to store information (such as size, read size, etc.) about the process of reading a large file in session variables. This data will then be retrieved using jQuery AJAX and displayed to the user to show t ...

phpjqueryajaxsessionreadfile

Tool for controlling the layout of the viewport with Javascript

I have experience using ExtJS in the past to create dashboards, and one of my favorite features is the full-screen viewport with a border layout. This allows for easy splitting of a dashboard into panels on different sides without creating excessive scroll ...

javascriptjquerycssextjsextjs4

When looking for attribute values in jQuery, do you utilize quotation marks in your search?

Suppose I have a hyperlink structured as follows: <a data-btn="login"></a> If I desire to target this specific link using jQuery based on its data attribute, how should I proceed? var a = $("[data-btn='login']"); //Should I use th ...

jqueryjquery-selectors

The "ID" value for the row that was chosen is unable to be parsed with AJAX JQUERY

After populating an HTML table with data retrieved from a database using PHP, I encountered an issue while trying to fetch the correct ID using AJAX. Following a recommendation to use classes to build my jQuery code, I find myself stuck and unsure of what ...

javascriptphpjqueryhtmlajax

Deactivate the Submit button when the database field has been populated

My form includes a submit button. The Submit button should be disabled if the "price" for a specific product is already filled: PHP Code <?php $host="localhost"; $username="root"; $password=""; $db_name="ge"; $con=mysqli_connect("$h ...

javascriptphphtmlmysql

Spacing issues while utilizing the <textarea> element

<tr> <td> <b>Escalation: </td></b> <td> <TextArea name='escalation' onKeyDown=\"limitText(this.form.escalation,this.form.countdown,100);\" onKeyUp=\"limitText ...

phpjavascripthtmltextarea

Step-by-step guide on creating a sequential glowing effect for list items with CSS and JQuery

I would like to create a glowing effect on each icon individually. The idea is for each icon to glow for a brief moment and then return to its normal state before moving on to the next icon in line. I am considering using text-shadow for the glow effect an ...

jquerycss

Creating a compact Swiper slider: reducing image size without sacrificing full window coverage!

Utilizing Swiper to craft a slider that occupies the entire window, with a slight margin for a bar-- no issues there. (https://i.sstatic.net/qcGBA.jpg) However, the image I placed in for the slide () appears to be excessively enlarged. Is there a way to ...

javascripthtmlcsssliderswiper.js

Images with scratches visible in Chrome

This puzzle may seem easy to some, but it's been quite challenging for me. I've encountered a discrepancy in how Firefox and Chrome render images (specifically technical drawings). Despite my attempts to use image-rendering: -webkit-optimize-cont ...

cssimage

Utilize CSS to ensure that the hover effect of the main navigation remains active even when the mouse hovers over the sub-menu

Is there a way to make the hover state in navigation items persist when the mouse hovers over a sub-menu? Currently, when hovering over a top-level nav item, the link color changes to white and background turns black, but this reverts back once the mouse m ...

csshover

Incompatibility Issue with Ajax Request on iPad 1 (iOS 5.1.1)

Having an issue with reloading content on my iPad web app. The get request works fine in the browser, but I'm experiencing trouble in Safari on the iPad 1 (iOS 5.1.1). Any suggestions on how to fix this? <script type="text/javascript"> ...

jqueryhtmliosajaxipad

When running Javascript code locally, the function works perfectly fine. However, once published, the function encounters a

After spending hours working on cascading dropdown lists and finally getting them to function properly, I published the project only to find that it didn't work as expected. The second list failed to populate. Upon checking Firebug's console, an ...

c#jqueryasp.net-mvcjson

Steps for inserting new text in front of an element's existing text

Is there a way to insert text before the original content of an element? I know how to add text after using createTextNode, as shown in this example: $("#button").click(function() { $( ".text" ).append( document.createTextNode( " Hello" ) ); }); < ...

javascriptjqueryhtml

Accessing the parent div in an Ajax success function

I am looking for a solution to hide a parent div when a link is clicked and an ajax call is successfully made. I have tried placing the hide() function within the success part of the ajax call, but it seems to not work: $('.mylink').click(functi ...

javascriptjqueryajaxjquery-animate

In React, the Textarea component that displays the character count only updates its value after a page reload

Contained within this element is the following component: import React, { useEffect, useState } from 'react'; import { TextareaTestIds } from '../utils/test-ids'; export interface TexareaProps extends React.TextareaHTMLAttributes<H ...

htmlreactjstypescriptreact-hooks

How to locate and interact with the submitName element using Selenium WebDriver

Is there a way to access an input text element with a dynamic id, no name, but has the attribute submitName using Selenium web driver? The document contains multiple elements and I need to retrieve 4 of them. <input class="mandy" id="ms__id7" submitNam ...

jqueryseleniumselenium-webdriver

Running a jQuery function that triggers a PHP script when the page

Hi there! I'm currently working on implementing jQuery's ajax feature to call a php script when the page loads. This php script will fetch xml data from a web service URL, parse it, and then display specific parts of it within a div tag on the pa ...

phpjavascriptjqueryajax

How can we protect against CSRF attacks?

My typical approach involves using AJAX to input data into a MYSQL database like this: $.ajax({ url: "writescript.php", type: "POST", data: { data : mydata,//this could be anything }, success: function (html) { //do something ...

javascriptphpjqueryajaxcsrf

Transform JSON data into a new object

I'm currently exploring methods to manipulate my JSON data and create a separate object with the modified information. Specifically, I am working with this JSON file: My goal is to transform [dataset][data] into the following format: [Date.UTC(2013 ...

javascriptjqueryjson