A continuous loop of text is displayed in a slideshow format, with different image files used for the navigation buttons "back", "stop", and "forward"

Question

A continuous loop of text is displayed in a slideshow format, with different image files used for the navigation buttons "back", "stop", and "forward"

I am in need of a unique slide show that displays text exclusively attached to CSS, with image files for the navigation buttons. I have been searching for days without success, as most options available are for image slideshows and not suitable for my text-based needs.

Currently, I have 4 paragraphs in a div with CSS overflow, but it is not visually appealing nor functional for my audience.

I envision a slide show with 4 layers (preferably div tags) playing continuously, with image buttons on the sides for navigation and one at the bottom to stop the slideshow. If anyone can provide me with a working code and guide me on where to insert it in the HTML, I would greatly appreciate it. I have been searching since Thursday, still looking on a Saturday morning!

I considered using Fireworks but only found options for Flash, which I want to avoid. I just downloaded Adobe Edge and might try that, though I was hoping for a JavaScript solution. Thank you!

javascript jquery css text slideshow

Answer 1

Answer №1

Here is a helpful link for you to check out: . Additionally, take a look at this link for more examples: . I believe this may be what you're looking for.

<div id="slider1">
  <div>Content for Slide one</div>
  <div>Content for Slide two</div>
  <div>Content for Slide three</div>
  <div>And so forth...</div>
</div>

After adding the above HTML code, remember to include the following in the head section of your HTML:

<script src="http://cdn.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider1').bxSlider({
      auto: true,
      autoControls: true
    });
  });
</script>

Answer 2

Here is a helpful link for you to check out: . Additionally, take a look at this link for more examples: . I believe this may be what you're looking for.

<div id="slider1">
  <div>Content for Slide one</div>
  <div>Content for Slide two</div>
  <div>Content for Slide three</div>
  <div>And so forth...</div>
</div>

After adding the above HTML code, remember to include the following in the head section of your HTML:

<script src="http://cdn.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider1').bxSlider({
      auto: true,
      autoControls: true
    });
  });
</script>

A continuous loop of text is displayed in a slideshow format, with different image files used for the navigation buttons "back", "stop", and "forward"

Answer №1

Similar questions

Removing a class from an element in jQuery upon hover

Ways to detect drag event on a CytoscapeJS node (specifically the one directly underneath the cursor/touch)

Razzle fails to initiate the server

Using jQuery to transfer array values to a different group of elements

Ways to Prevent Accidental Double Clicking of an Ajax Button

steps to overlay an image over another in bootstrap:

Dynamic row Material-UI input field

Why does Googlebot need to retrieve HTML from JSON-exclusive URLs?

Vue.js - dynamically applying CSS classes based on conditions

How can I temporarily turn off the animation on a directive in Angular JS to prevent it from animating during page load?

When users visit my contact HTML page, they are redirected to the contact PHP page, but unfortunately, the email is

React - what propType should be used for the Material UI icon?

Transmit JSON from PHP to an autocomplete feature and include a data attribute in the input field

Having trouble getting the Grid class to work in Tailwind with NextJs, any suggestions on why it might not be

Remove a data entry from the MySQL database by selecting the corresponding row in the table and utilizing the DELETE function

What is the best way to show information entered into a textbox on a different webpage?

The behavior of an Angular 2 method varies depending on whether it is called in ngOnInit or triggered by a button

Exploring the benefits of utilizing express-session for authentication management

"Utilize Rotate3d() to rotate the content of a div element

Eliminating rows from a DataTable through an Ajax request