1

I am fairly new to coding and have made a basic image slider following a few html, css and java tutorials.

I have worked out a simple way to add text to my slider, but I'd prefer the text to hover over the top part of the image instead of above.

I think a transparent box featuring the text would work great, I just don't know how to achieve this.

Any help would be great!

'use strict';

$(function() {

  //settings for slider
  var width = 720;
  var animationSpeed = 1000;
  var pause = 5000;
  var currentSlide = 1;

  //cache DOM elements
  var $slider = $('#slider');
  var $slideContainer = $('.slides', $slider);
  var $slides = $('.slide', $slider);

  var interval;

  function startSlider() {
    interval = setInterval(function() {
      $slideContainer.animate({
        'margin-left': '-=' + width
      }, animationSpeed, function() {
        if (++currentSlide === $slides.length) {
          currentSlide = 1;
          $slideContainer.css('margin-left', 0);

        }

      });
    }, pause);
  }

  function pauseSlider() {
    clearInterval(interval);
  }

  $slideContainer
    .on('mouseenter', pauseSlider)
    .on('mouseleave', startSlider);

  startSlider()


}); ** strong text **
body #slider {
  width: 720px;
  height: 500px;
  overflow: hidden;
}

#slider .slides {
  display: block;
  width: 6000px;
  height: 500px;
  margin: 0;
  padding: 0;
}

#slider .slide {
  float: left;
  list-style-type: none;
  width: 720px;
  height: 500px;
}
<!DOCTYPE html>
<html>

<head>

  <link rel="stylesheet" type="text/css" href="Slider CSS.css">


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
  </script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script type="text/javascript" src="slider Java.js"></script>
</head>

<body>
  <div class="container">
    <div class="header">
      <h1 class="text-muted">Gallery</h1>
    </div>

    <div id="slider">
      <ul class="slides">
        <li class="slide">
          <div style="font-family:courier;">
            <h3>Tree</h3>

            <img src="https://jooinn.com/images1280_/bottom-view-of-green-leaved-tree- 
    during-daytime.jpg"></li>

        <li class="slide">
          <div style="font-family:courier;">
            <h3>Sheep</h3>

            <img src="https://icdn3.digitaltrends.com/image/chimera-majestic-sheep- 
    tongue-720x720.jpg"></li>

        <li class="slide">
          <div style="font-family:courier;">
            <h3>Turtle</h3>

            <img src="https://images.mid-day.com/images/2018/jun/Turtle-deaths_d.jpg">
        </li>

        <li class="slide">
          <div style="font-family:courier;">
            <h3>Water Dragon</h3>

            <img src="https://1funny.com/wp-content/uploads/2009/05/cute-fish-2.jpeg">
        </li>

        <li class="slide">
          <div style="font-family:courier;">
            <h3>Cute Fish</h3>

            <img src="http://www.cutestpaw.com/wp-content/uploads/2012/05/super-cute- 
    fish.jpg"></li>

        <li class="slide">
          <div style="font-family:courier;">
            <h3>Tree</h3>

            <img src="https://jooinn.com/images1280_/bottom-view-of-green-leaved-tree- 
    during-daytime.jpg"></li>
      </ul>
      </div>
      </div>


</body>

</html>
Electron
  • 969
  • 1
  • 8
  • 22
Dave Chappele Ede
  • 27
  • 3
  • 3
    You are using Javascript not Java .. you will make the Java people mad – Temani Afif Oct 03 '18 at 11:21
  • https://stackoverflow.com/questions/21086385/how-to-make-in-css-an-overlay-over-an-image?noredirect=1&lq=1 – Paulie_D Oct 03 '18 at 11:24
  • Thank you for the help everyone. This problem is now solved, thanks to Paulie_D and Zakaria Acharki pointing out that there was already a page with the answer to this! Many thanks again. – Dave Chappele Ede Oct 03 '18 at 15:13

0 Answers0