Is it possible to have a never-ending slideshow with inline-blocks?

After spending countless hours trying to troubleshoot my code, I am now seeking help from the wonderful people of the internet! ;) It seems like only a small portion of my code is incorrect. What I'm attempting to do is move the leftmost object in the container off-screen and then append it to the last item in the container to create a continuous scrolling effect. Currently, I have only three elements to test if this functionality works. Can you spot what I'm doing wrong?

Here is my HTML:

<section class="photo-grid-slideshow">
    <div class="photo-crop">
        <h3>I wanna
            <div class="xs-spacer"></div>
            <a class="med-btn btn-white">Read more</a>
        </h3>
        <div class="photo-grid-container" style="background-image: url('Images and videos/odesza1.jpg');"></div>
    </div>
    <div class="photo-crop">
        <h3>Dance
            <div class="xs-spacer"></div>
            <a class="med-btn btn-white">Read more</a>
        </h3>
        <div class="photo-grid-container" style="background-image: url('Images and videos/odesza3.jpg');"></div>
    </div>
    <div class="photo-crop">
        <h3>With you
            <div class="xs-spacer"></div>
            <a class="med-btn btn-white">Read more</a>
        </h3>
        <div class="photo-grid-container" style="background-image: url('Images and videos/odesza2.png');"></div>
    </div>
</section>

And here is my CSS:

.photo-crop {
    display: inline-block;
    overflow: hidden;
    float: left;
    width: calc(100% / 3);
    height: 100%;
    line-height: 100%;
    margin: 0;
    margin-right: 0;
    padding: 0;
    display: inline-block;
    position: relative;
    left: 0;
    right: 0;
    background-position: center center;
    background-size: cover;
    transition: all 0.2s;
    text-align: left;
}

.photo-grid-slideshow {
    height: 300px;
    display: inline-block;
    min-width: 100%;
    position: relative;
    background: black;
    padding: none;
    overflow: hidden;
    background: #444;
}

Lastly, my JavaScript looks like this:

 $(function () {
    var timer = setInterval(function() {
        $(".photo-crop:first-child").animate({marginLeft: '-=33vw'}, 2000, "linear", function() {
            $('this').Css("margin-left", 0).appendTo('.photo-crop:last-child');
        });
    }, 2000);
 });

Answer №1

Here's a fun challenge for you:


$(function() {
  var slideShow = setInterval(function() {
    $(".photo-crop:first-child").animate({
      marginLeft: '-=33vw'
    }, 2000, "linear", function() {
      $(this).css("margin-left", 0).appendTo('.photo-crop:last-child');
    });
  }, 2000);
});

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

Extracting pictures with py Jupyter

While attempting to scrape images from this URL using Python in Jupyter: https://www.adobe.com/products/catalog.html?sort=name&types=pf_252Fdesktop&types=pf_252Fmobile&types=pf_252Fweb&page=1, the code I ran resulted in the following error: ...

Ensure that the array in Jest does not have any falsy values present

Attempting to utilize Jest for a unit test to ensure the absence of falsy values in my array named values. Unfortunately, the initial approach is not effective; the test actually passes: const badValues = ['', null, undefined, false, {}, []]; e ...

Unlocking fashion with $refs: A step-by-step guide

After using console.log(this.$refs['block' + row + column]);, I confirmed that I can successfully access the HTML element it refers to. https://i.stack.imgur.com/7KYqB.png However, when attempting to access the element's style using variou ...

Different ways to adjust the positioning of the HTML canvas created using p5.js

I am attempting to integrate the output canvas from p5.js into my webpage by following a tutorial heretutorial. I am hoping that the canvas will appear where I have positioned it within the HTML body. However, no matter what I try with CSS properties like ...

Transform the query results into clickable links

Is there a way to automatically turn specific results fetched from a MySQL $row into hyperlinks? For example, if I fetch the website Google.com in a search query, is there a method for making it an active hyperlink that goes directly to Google.com when cli ...

Once all ajax requests have been completed,

My task involves performing multiple ajax requests in order to populate select boxes and then hide the loading panel once everything is loaded. The process works perfectly when done in a specific way: $.when( $.getJSON(applicationUrl + "data/codiciPa ...

Is the memory usage of node.js proportional to the number of concurrent requests, or is there a potential memory leak?

Running the following node.js code: var http = require('http'); http.createServer(function(req,res){ res.writeHead(200,{'Content-Type': 'text/plain'}); res.write("Hello"); res.end(); }).listen(8888); Upon starting the server ...

Incorporating a helper JavaScript file to seamlessly integrate Typeform into a project built with Vue

Struggling with incorporating a typeform into my website through the use of both vue and laravel. The problem arises when trying to embed the typeform using a script, as Vue throws an error when attempting to include the script directly within the compone ...

The function this.listCatModel.push is not a valid operation

I have a dropdown that I want to populate using the following code: this.categoryService.GetListItem(this.GetAllcatListUrl).subscribe(data=>{ this.listCatModel=data, this.listCatModel.push({ id:0, name:'Main Category', parent ...

Updating open graph meta tags using jQuery

I need assistance tweaking my code to dynamically modify the <meta property="og:title" content="CHANGE_ME"> tag when sharing a page containing an embedded video. While swapping the <h1> and <title> elements is functioning as intended, I& ...

Can someone guide me on how to utilize the onkeyup event within a bootstrap select element?

This code uses Bootstrap to filter elements, but I want to implement an onkeyup event to trigger a function. Whenever I type in the search input, I want it to automatically call myFunction(). <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/ ...

I encountered an issue with Material UI tabs showing the error message: "Failed prop type: The prop `children` is not supported. Please remove it."

Recently, I started using Material UI tabs in my project for the first time. Everything seems to be working fine except for one issue that keeps showing up in the console while running the project: Failed prop type: The prop `children` is not supported. Pl ...

Is there a way in Ruby to extract the inner HTML of the <title> tag by loading the HTML source code of a webpage into a string and then parsing it?

Currently, I am trying to extract the inner HTML of the <body> tag from an HTML source string using Ruby. Does anyone know how this can be achieved? Despite my attempts to find a solution, I have been unsuccessful so far. Any guidance would be grea ...

The error message "Blazor WebAssembly JSRuntime.InvokeVoidAsync - blazor.webassembly.js:1 Uncaught (in promise) TypeError: Converting circular structure to JSON" indicates that

I have implemented the drawio-integration project in my Blazor WebAssembly application. https://github.com/jgraph/drawio-integration This is how the simple helloworld sample appears: <img onclick='DiagramEditor.editElement(this);' src=" ...

Is Html.Raw necessary for handling ragged html generated by Razor?

When it comes to generating HTML in a dynamic grid model using Razor, the following code snippet is often used: @{ int blockCounter = 0;} @foreach (var item in Model.Items) { if (blockCounter++ % 3 == 0) { //ragged html open here, when needed ...

Having trouble choosing a subitem from a dropdown menu in Vuejs?

An example can be found at https://jsfiddle.net/79epsrmw/. However, the issue arises when targeting the item1 sub-menu in VS Code even after assigning a unique id. var app = new Vue({ el: '#app', data: { menuItems: [ ...

Establishing a Next.js API endpoint at the root level

I have a webpage located at URL root, which has been developed using React. Now, I am looking to create an API endpoint on the root as well. `http://localhost:3000/` > directs to the React page `http://localhost:3000/foo` > leads to the Next API end ...

Pagination in the jQuery datatables plugin is not functioning as expected

Help Needed I am using the datatables jQuery Plugin to display a table, but I am facing an issue where all entries are shown without any pagination. Can someone please assist me with this problem? Below is my index.cshtml code: @{ Layout = null; } & ...

What is the specific jQuery event triggered when utilizing the append function on a textarea element?

I am currently setting up a system to detect any modifications in a textarea: <textarea id="log-box__data"></textarea> Modifications are made to the textarea exclusively using jQuery's append method: $(document).on('click', &a ...

Struggling to clear items from input field within AngularJS

I'm currently facing an issue where I am unable to delete data from an input field. var myApp = angular.module('myApp',[]); myApp.controller('MyCtrl', function MyCtrl($scope) { $scope.items = [ { name: & ...