Utilizing a JQuery image slider: A beginner's guide

I'm encountering some challenges while setting up my jQuery image slider. I can't seem to figure out what the issue is. I am utilizing responsiveslides.js ()`

/* RESET */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
  /* Cancel out some differences between browser defaults */
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

* {
  /* Padding and borders will be subtracted from the content box width, not added to it. */
  box-sizing: border-box;
}

article, aside, audio, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
  /* Make sure the browser knows how to display HTML5 elements */
  display: block;
}

header img{
  display: block;
  width: 30em;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2em;
  padding-bottom: 1em;
}
#wrap{
  background-image: url(Images\seamless-old-style-wallpaper-Download-Royalty-free-Vector-File-EPS-37757.jpg);
  background-repeat: repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  border: 1px;
}
nav {
    width: 40em;
    height: 3em;
    background: light grey;
    padding-top: 1em;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-right: auto;
    margin-left: auto;
    color: white;
  }

nav ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style: none;
    float: left;
    text-align: center;
    color: white;
    width: calc(40em / 6);

}



nav ul li a, nav ul li a :visited  {
    display: block;
    text-decoration: none;
    color: #white;
}

nav ul li a: hover {
  color: brown;
}
li a { text-decoration: none; color:#fff; }
li a:visited { text-decoration: none; color:#fff; }
li a:hover { text-decoration: none; color:#512e15; }
li a:focus { text-decoration: none; color:#fff; }
li a:hover, li a:active { text-decoration: none; color:#512e15; }

footer{
  display: flex;
  position: fixed;
  bottom: 0px;
  width: 40em;
  margin-left: auto;
  margin-right: auto;
  height: 3em;
  background-color: light grey;
  padding-top: 1em;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  left:0;
  right:0;
  clear: left;
}

p, address, #phone, #email{
  color: white;
  padding-left: 1em;
  padding-right: 1em;
  font-size: .75em;
}
footer img{
  height:1em;
  width: 2em;
  padding-left: 1em;


}
body{
  display: flex;
}

#leftSide{
  float:left;
  width: 32em;
  height: 16.5em;
  font-size: 1.5em;
  margin-left: 7em;
  margin-right:7em;
  margin-top: 1em;
  margin-bottom: 1.5em;
  overflow-y: scroll;
}
aside{
  display: inline-flex;
  color: white;
	font-size: 2em;
	width: 50%;
	height: 100%
}
#title h1{
	color: white;
	margin-top: .25em;
	margin-bottom: .25em
	margin-left:auto;
	margin-right:auto;
	font-size: 5em;
	text-align:center;

}
iframe{
	margin-top: 3em;
}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
	display:block;
  	height:auto;
	float:left;
	width:100%;
	border:0;
}
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Great Art</title>
<link rel="stylesheet" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>

</head>

<body background="Images\flock_wallpaper_pattern_by_hydrogen666.jpg">
<div id=wrap>
	<header>
	    <img src="Images\Great Art logo 2.jpg" alt="Great Art Logo"> </img>
	  </header>
	<nav>
		  <ul>
			  <li><a href="index.html">home</a></li>
			    <li><a href="Gallery.html">gallery</a></li>
				  <li><a href="artist biography.html">artist biography</a></li>
				    <li><a href="blog.html">blog page</a></li>
					  <li><a href="about us.html">About us</a></li>
					    <li><a href="contact us.html">contact us</a></li>
		  </ul>
	</nav>
	<div id=main>
	  <ul class="rslides">
		  <li><img src="1.jpg" alt=""></li>
		    <li><img src="2.jpg" alt=""></li>
			  <li><img src="3.jpg" alt=""></li>
		</ul>
		  <script>
		      $(function () {
			      $(".rslides").responsiveSlides();
				          });
		              </script>
			                  </div>
								  <footer>
									  <p> Great Art </p>
									  	  <address> PO Box 12-345 Christchurch </address>
										  	  <p id=phone> Phone: 03 345 6789 </p>
											      <p id=email> Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89e1fcebecfbfdc9eefbece8fda4e8fbfda7e6fbeea7e7f3">[email protected]</a> </p>
												  	  <img src="Images\fb-art.jpg"> <img src="Images\twitter logo.png">
													  	</footer>
															</div>
																</body>
																
																	</html>

I have placed the .js file in the correct folder, but I am perplexed as to why it is not functioning.

javascriptjqueryhtmlcss

Answer №1

Make sure to put the id in quotes and ensure that the div enclosing it is closed properly before the script block. Move the script block outside of the div, at the bottom of the page, then close the div as follows:

     <div id= "main">
        <ul class="rslides">
          <li><img src="1.jpg" alt=""></li>
          <li><img src="2.jpg" alt=""></li>
          <li><img src="3.jpg" alt=""></li>
        </ul>
    </div>
//other code
<script>//code//</script>

Another thing to note is to correct the closing of your img tags - use forward slashes instead of backward slashes like so:

    <img src= "Images/fb-art.jpg" alt="facebook logo"/>
    <img src= "Images/twitter logo.png" alt="twitter logo"/>

Answer №2

  1. i conducted a test on the official JavaScript library (I recommend replacing it in your HTML head as well)
<!-- //official jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- //official responsiveslides -->
<script src="http://responsiveslides.com/responsiveslides.min.js?v=1.6"></script>

  1. Modify the main slideshow script to trigger it in (I added an auto starter, maybe that's the reason why your slideshow doesn't start), without pagination and navigation.

    $(function () { 
      $(".rslides").responsiveSlides({
    auto: true,
    pagination: false,
    nav: false,
    fade: 500
  });

});

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

NextJS is throwing an error stating that the element type is invalid. It was expecting either a string for built-in components or a class/function for composite components, but instead received an object

I encountered the following issue: Error - Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but received an object. Here's the code from my \components\LayoutWrapper.js: i ...

javascriptreactjsnext.js

Enhance User Experience with jQuery UI Droppable: Customize default elements from a saved list and expand drop zones for added functionality

Take a look at my current setup on JSFiddle: https://jsfiddle.net/w27g3xp2/1/ In the setup, there is an input box with some preset values. My objective is to generate and position 4 droppable elements based on the inputs in the field so that they appear i ...

jqueryjquery-uiinputdroppable

Restricting href Usage Based on Session

I find myself in a challenging situation without a clear solution at hand. Within this code, I am utilizing a link and a button for which I need to save the page in a database. Therefore, creating a server control is not an option as it will not be render ...

javascriptasp.netsessionhref

Show the page links on the custom WordPress theme's home page

This is my first time creating a wordpress theme from scratch and I could use some assistance with tackling two specific challenges involving the WP_Query class and the navigation menu. My goal is to showcase the titles and featured images of pages on the ...

phphtmlcsswordpressbootstrap-4

Utilizing the js-yaml library to parse a YAML document

Currently, I'm utilizing js-yaml to analyze and extract the data from a yaml file in node js. The yaml file consists of key-value pairs, with some keys having values formatted like this: key : {{ val1 }} {{ val2 }} However, the parsing process enco ...

javascriptnode.jsjsonparsingyaml

Struggling to set the background color for a div element

I am dealing with the following HTML and CSS: <div id="com_loaded"> <div id="com_loaded_userpic"><a href="#" class="tooltip"><img src="pic.jpg" class="img_poster" /><span>Username</span></ ...

htmlbackground-color

Switching from vertical pills to horizontal tabs for smaller screens

I have a vertical pills menu that looks great on large screens, but takes up too much space on small screens. Is there a way to switch it to a horizontal tab layout for smaller screens? I tried searching online for examples but couldn't find any. < ...

csstwitter-bootstrapbootstrap-4

Managing state with Apollo within a component

Greetings and thank you for taking the time to help me out. I am currently diving into the world of Apollo and React, but it seems like I am struggling with some logic here. On my main page index.js, I have initialized Apollo in the following way: export c ...

javascriptreactjsstatenext.jsapollo

"Upon refreshing the Angular app, the index.html file is not loaded

My angular.js application has a basic setup where the index.html file renders static content like Top/Sidebar. Inside, there is a <div ng-view></div> to display partial html files such as home.html. Upon logging into the application, both the ...

angularjshtmlnode.jsexpressroute-provider

Switch the dropdown menu to a button if it consists of only one option

I have been using a database within the Moodle Learning Management System that generates a bootstrap table. Here is an example of what it looks like: https://i.sstatic.net/UJc4M.png The last row in the table contains a dropdown menu. When viewing your ow ...

javascripthtmlcsstwitter-bootstrap

What is the best way to utilize regex in converting this CSS block to LESS?

Currently undertaking the task of refining over 10,000 lines of CSS code. Instead of manually converting line by line, I aim to transform from this: -webkit-transition: .1s linear all; -moz-transition: .1s linear all; transition: .1s linear all ...

javascriptcssregexreplaceless

Is there a way to change the labels of checkboxes within a table that is created dynamically?

I am new to JavaScript/jQuery and facing an issue with modifying checkbox labels in a dynamically generated table. <td> <input type="checkbox> <b>$18,000.00</b> ($18000+) Diamond Sponsor<br> <input type="checkbox> <b ...

javascriptjqueryhtmlformscheckbox

Preventing Click Event Propagation in React Using e.stopPropagation()

I am facing an issue with a div wrapped in a Link tag within NextJS. Inside this div, there is a row of button components. Whenever I click on a button, it performs its action correctly but also triggers the Link tag from the parent div causing us to navig ...

javascriptreactjs

The HTML generated by Selenium using Javascript is still missing some elements, despite accessing the document.body.innerHTML

Attempting to retrieve the HTML from a webpage that undergoes modification by JavaScript post-loading. Followed directions in this guide, executing the command below in my Python script after initial page load: html = browser.execute_script("return docume ...

javascriptpythonhtmlseleniumweb-scraping

What is the best way to pass the value from one JavaScript file to another in the ViewModels and main JavaScript file?

https://i.sstatic.net/pzFAS.jpg Within the login.js file, a REST API is returning specific values that need to be utilized in the Dashboard.html file. However, the values are not being retrieved successfully in the dashboard.js file. A similar requiremen ...

javascripthtmlmvvmknockout.jsoracle-jet

Why is "return _this.state.data" being returned instead of JSON object?

After setting up a parent component to make an AJAX call and retrieve a JSON object, everything seemed fine. However, when passing the data through props, I encountered the following value: ƒ data() { return _this.state.data; } Despite my efforts to t ...

javascriptjsonajaxreactjs

Attempting to showcase a collection of values, specifically focusing on highlighting the even numbers within the array

const sampleArray = [ 469, " " + 755, " " + 244, " " + 245, " " + 758, " " + 450, " " + 302, " " + 20, " " + 712, " " + 71, " " + 456, ...

javascript

Using JavaScript to skip duplicate rows in an HTML table based on group

My current task involves fetching multiple data from a database using AJAX and PHP. Once I retrieve the data successfully, I need to group the results in a specific format like the images shown below, including having a textarea field for each group. Here ...

javascriptajaxgrouping

Leveraging Bootstrap without an internet connection

In the process of developing a desktop application with Electron, I have decided to incorporate Bootstrap for its design elements. Yet, my ultimate goal is to ensure that the app remains functional offline once it is released. Is there a method available ...

javascriptbootstrap-4electronoffline

Trigger a C# function upon the Ajax timer (counts down) hitting 0

I am facing a major issue with a simple task... I have an asp.net page with a Multiview containing two views. In the first view, there is an ajax timer that counts down from 60 to 0. The time is displayed on a label within an updatepanel. I want to call a ...

c#javascriptasp.netajaxtimer