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

Problem with Jquery Sticky Navigation

I've been struggling to understand this issue and can't seem to find any help. http://fiddle.jshell.net/DQgkE/7/show/ The user experience is currently a bit glitchy, but what I would like is: 1) When scrolling down the page, I want the Sticky ...

CSS is not referred to as animation

Every time we hit a key, the dinosaur receives a jump class that should activate an animation. Unfortunately, the animation does not play. animation not functioning <!DOCTYPE html> <html lang="en"> <head> <meta c ...

Ways to dynamically assign value to a checkbox using jquery

var sites = sites_str.split(","); $.each(sites,function(i,j) { $('.check').append("<input type=checkbox name=site_name value=sites[i]>"+sites[i] +"</br>" }) I am facing an issue when trying to retrieve the values of selected check ...

The layout of my website appears distorted on mobile devices

When I view my website, http://www.healthot.com, on an iPhone or other mobile device, the page doesn't display correctly. It scales the window, requiring me to zoom out to see the entire page. To better understand the issue, please refer to this photo ...

Unable to navigate to the specified action in the MVC framework

In my View, I have a form for updating an Order with several fields and two buttons: Submit and Back. To send the form data to the controller, I am using jQuery Ajax: function onUpdate(e) { var data = getParameters(); $.ajax({ url: ' ...

How can I pass a PHP variable to a JavaScript variable using PHP and JQuery/JavaScript?

I am facing a challenge with a large <select> input that is used across multiple pages. My idea is to separate this dropdown box into its own PHP file and load it externally using JQuery. Is this approach feasible? Here's an outline of what I ha ...

Exploring a new method for AJAX loading when handling large amounts of data into multiple div elements

As I continue my learning journey with html and jquery, I have been exploring ways to replicate monitoring systems (SCADA) into web-based systems. During this process, I discovered openseadragon as a MAP system similar to google maps that allows for overla ...

Issue with AngularJs Autocomplete: this.source is not being recognized as a function

Below is the HTML code snippet for an autocomplete textbox feature: <body ng-controller="HomeController" ng-init="init()"> <div class="col-xs-4 search-bar-position" > <form role="search" > <div c ...

Added the .active state to the menu navigation successfully, however the active color was not implemented

My primary navigation menu is managed by WordPress and can be seen below. I aimed to modify the active state when a user clicks on a link in the menu by adding background-color and color for styling purposes. Although changing the background-color upon cl ...

Automatically adjust sizes with div elements

How can I automatically resize this iframe within a div? My current method is not effective. <iframe src="http://www.gamepuma.com/external.html?http://data.gamepuma.com/games/06/crash-bandicoot.swf" width="600" height="400" frameborder="0" margin ...

Iterate through the form fields and save the information into an object

I am attempting to create a JavaScript object by looping through form inputs. const data = {}; // loop through each input found in form $('#form_name').filter(':input').each(function() { const $id = $(this).attr('id'); c ...

Tips for obtaining the retrieved URL from an ajax call

How can I extract only the returned URL from an ajax request? I have tried implementing it like this: $.ajax({ type: "GET", dataType : "jsonp", async: false, url: $('#F ...

Utilizing CSS in JS for nested hover styles with Material UI: a step-by-step guide

I am currently utilizing Material UI and in the process of converting regular CSS classes into a JavaScript file. .nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } .navItem { float: left; flex: 1; } .navLin ...

What is the best way for me to make my hamburger animation play in reverse?

Having trouble achieving smooth animation effects. I've designed a burger icon using three divs: <div class="container"> <div class="burger-contain"> <div id="line-1" class="line"></div> <div id="line-2" class="lin ...

The Problem of Restoring Column Height in Tabulator 4.6.3 Filters

The Issue After activating and deactivating header filters, the column height does not return to its original state. Is this the expected behavior? Is there a way to reset the column height? Check out this JS Fiddle example: https://jsfiddle.net/birukt ...

Display an image when the iframe viewport is reduced in size by utilizing media queries

I am looking to showcase a demo.html page within a 400px square iframe. When the viewport is smaller than 400px, I want demo.html to only display an image. Then, when clicking on that image in demo.html, the same page should switch to fullscreen mode. Sim ...

How to retrieve 'data' attributes from an object that was dynamically loaded?

I'm currently facing an issue with accessing the data attributes of a dynamically loaded file using AJAX. For instance, I load a file containing: <div id="blah" class="hello" data-something="or_other" /> Then, I use jQuery to access the data: ...

Centering loaders within elements of an unordered list

I am working on a navbar that uses Bootstrap 3 and AngularJS. Within this navbar, I have an unordered list with li elements. Below is a snippet of my navbar: https://i.stack.imgur.com/o75Lp.png This is the code for my navbar: <div class="navbar-head ...

What is the reason for the successful addition of a list item, using dynamic methods, in Chrome and Firefox while encountering issues in

I have encountered an issue with my jQuery code that works perfectly fine in Firefox and Chrome but fails to work in Internet Explorer 8 (I haven't tested it on other versions of IE). It is important to note that Internet Explorer is running in standa ...

Tips for showcasing overflowing text in a menu list by rotating the item text

Imagine you have a TextMenuItem component, using MenuItem from the Material-UI library, that is part of a chain consisting of DropDownSearch > SimpleListMenu > FixedSizeList > TextMenuItem. In simple terms, this creates a searchable dropdown element with t ...