A step-by-step guide on coding a slider image

    <?php 
             $query1="SELECT * FROM user_photos_offline  WHERE ssmid='$ssmid' AND status='1' ORDER BY date_uploaded DESC LIMIT 0,5";
             $sql=mysql_query($query1); 
             $count=mysql_num_rows($sql);   
             $results=array();
             while($row=mysql_fetch_assoc($sql)){
            // $results[]=$row['image'];
            ?>
            <img src="upload_images/<?php echo $row['image']?>" class="img-responsive image" onclick="showImg('upload_images/<?php echo $row['image']?>')">
            <!-- Here i got all images,now it will showing in row by row,but dont want like this,i want i row for and remaining photos are come slider, idont know how to write the code-->
            <?php } ?>

I am working on developing an image slider without using a plugin. I need assistance with coding the slide functionality for displaying multiple images in a single row followed by the rest of the images being shown in a slider format. Any suggestions or help would be greatly appreciated.

Answer №1

Feel free to experiment with the code snippet provided below.

Code Playground

  @keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}

Link for More Updates

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

"Fixing the position of a div on the Samsung Galaxy S8 navigation bar to

Here is the HTML code I am working with: <div class="app-bar"> <a href="#'>icon</a> <a href="#'>icon</a> <a href="#'>icon</a> <a href="#'>icon</a> </div>' ...

Angular: Autocomplete field automatically shifts focus when an item is removed

I am currently working on an Angular 2 application that utilizes PrimeNG components. One of the UI features includes an autocomplete component with multi-select functionality (p-autoComplete) similar to the one showcased in the official documentation: < ...

Error: Conditional formatting not compatible with JavaScript detected

I have a jQuery DataTable that is populated with data from a JSON file. Everything works smoothly, but I'm encountering an issue with conditional formatting. The script I'm using assigns a 'positive' class to all cells in column 2, even ...

What is the best way to update HTML content using JSF reRender or Ajax load, and then rebind the updated DOM with AngularJS?

Let's analyze the following piece of code: <div id="dest"> <p>Original Content</p> <p>Some data</p> <ul> <li ng-repeat="i in items">{{i.name}}</li> </ul> </div> Alternatively, u ...

Is there a way to specifically style the element I am hovering over with Tailwind Typography and prose?

Currently, I am customizing my markdown pages with Tailwind typography and prose. I am facing an issue where the hover effect is being applied to all images at once instead of just the one being hovered over. Any ideas on how to fix this? Here is a snippe ...

loading xml data into a table partially using jquery

Currently, I am utilizing AJAX to load and parse XML data. I have constructed a table where I am inserting the data from the XML using a loop. The issue lies in the fact that only around 3000 rows are being inserted into the table even though the XML conta ...

Adjust the font size in CSS based on a specified range of values

When the screen size is small (mobile), the font size is fixed at 14px. On really large screens, the font size is set to 18px, ensuring it never goes below 14px or above 18px>. This is achieved using media queries.</p> <p>However, for the i ...

Retrieve a PHP file utilizing Javascript or JQuery

Is there a more straightforward method than using ajax to retrieve the contents of an HTML or PHP file and place it within a div on the current page? I am familiar with the process through ajax, but I am curious if there is a simpler alternative that doe ...

Steady Content of a Parallax Webpage

Hey there! I recently put together this awesome site and I'm facing a challenge with fixing text on the first slide, specifically the one featuring the Nike basketball. Right now, the text 'The first of its kind' is part of the background im ...

Ways to verify if an email has been viewed through the client-side perspective

How can I determine if an email has been read on the client side using PHP? I need to verify if emails sent by me have been opened by recipients on their end. Additionally, I would like to extract the following details from the client's machine: 1. ...

What is causing the Spring MVC controller method to not process the basic GET AJAX request effectively?

I am currently developing a Spring MVC application and facing an issue while trying to retrieve a String value passed through a JQuery AJAX Request. function addNotes() { console.log("INTO addNotes()"); var currentNoteText = $('#currentN ...

MVC5 Toggle Button for Instant Display and Concealment

I used to utilize this method in Web Form development by targeting the id and name of the input radio button. However, I am encountering difficulties implementing it in MVC5. Can someone kindly point out where I might be going wrong? Upon selecting a radi ...

Advanced AJAX image gallery with a touch of fancybox

I'm attempting to implement a fancybox image gallery using ajax for the first time. My knowledge of fancybox and jQuery is limited, but here's what I've managed to put together so far. Take a look at the gallery link below; <a class="fan ...

Labels are overlapping each other and being aligned to the right side

Working with the most up-to-date version of Bootstrap, I am currently designing a search bar featuring a dropdown menu preceding the search button. Upon clicking the dropdown, various controls are revealed. Below is the HTML code for this configuration: ...

Determine the overall cost based on varying percentage increases for each step

I am currently working on developing a price estimation calculator. Here is the breakdown: For 1000 MTU, the price will be 0.035, resulting in a total of 35. For 2000 MTU, the price will be 0.034, making the total 67. For 3000 MTU, the price will be 0.03 ...

How can I use jQuery to transform a div with its elements into a canvas?

Looking for a way to convert a HTML Div and its elements to canvas, and then the canvas to an image using Jquery. I've checked out a website that only converts the whole HTML page, but I need a solution for converting specific Div elements. Any help w ...

What is the best way to grasp the concepts behind MaterialUI styled components?

Can someone please help me understand how to apply styles to a component using MaterialUI? I've been reading the documentation but it's all very confusing to me. What exactly are classes and how do I connect the const style to the BeerList compon ...

Display top level option while in Level 2 menu on Woocommerce

Looking to implement an accordion menu for mobile devices on a WordPress Woocommerce site. I've tried various code snippets from other sources but haven't been successful so far... The current code only supports 2 levels of the accordion menu. H ...

Is there a way to have the collapsible content automatically expanded upon loading?

I came across a tutorial on w3school (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol), which demonstrates collapsible content hidden by default. The code snippet from the link is provided below. Can someone assist me in cha ...

Tips for organizing and concealing images within a Div for seamless transitions (no need for floats)

Currently, I am working on a grid layout for my website. My goal is to have 9 images load quickly, and then once the page has loaded, I want to fetch additional images, insert them into the image containers, and animate between them. While I understand how ...