Solution 1 :

You can add this to the bottom of your page, before the </body> tag:

<script>
function visit(url){
    window.open(url, '_self');
}
</script>

Then you can add your links to the div like this:

<div style="background-image:url(cps-images/home-slider1a.png); background-color: #e0e1dd;" onclick="visit('https://www.google.com')"></div>

Solution 2 :

Other solution would be to delete the background-images and just use regular “img” elements inside the “div” and then wrap them both inside “a” element.

In this case “img” should have the following styling:

img {
  width: 100%;
  height: 100%;
  background-size: cover;
  }

Problem :

I have a javascript slideshow. I added to my page and it works great. I’m not a javascript developer and got the solution online. However I need each image to link somewhere and despite how simple it should be, I cannot get it to work. When I add a tag the image disappears…can anyone help? Maybe add an additional config parameter to the javascript code where a URL could be entered?

(function($) {
  "use strict";
  $.fn.sliderResponsive = function(settings) {

    var set = $.extend({
        slidePause: 5000,
        fadeSpeed: 800,
        autoPlay: "off",
        showArrows: "on",
        hideDots: "on",
        hoverZoom: "on",
        titleBarTop: "off"
      },
      settings
    );

    var $slider = $(this);
    var size = $slider.find("> div").length; //number of slides
    var position = 0; // current position of carousal
    var sliderIntervalID; // used to clear autoplay

    // Add a Dot for each slide
    $slider.append("<ul></ul>");
    $slider.find("> div").each(function() {
      $slider.find("> ul").append('<li></li>');
    });

    // Put .show on the first Slide
    $slider.find("div:first-of-type").addClass("show");

    // Put .showLi on the first dot
    $slider.find("li:first-of-type").addClass("showli")

    //fadeout all items except .show
    $slider.find("> div").not(".show").fadeOut();

    // If Autoplay is set to 'on' than start it
    if (set.autoPlay === "on") {
      startSlider();
    }

    // If showarrows is set to 'on' then don't hide them
    if (set.showArrows === "on") {
      $slider.addClass('showArrows');
    }

    // If hideDots is set to 'on' then hide them
    if (set.hideDots === "on") {
      $slider.addClass('hideDots');
    }

    // If hoverZoom is set to 'off' then stop it
    if (set.hoverZoom === "off") {
      $slider.addClass('hoverZoomOff');
    }

    // If titleBarTop is set to 'on' then move it up
    if (set.titleBarTop === "on") {
      $slider.addClass('titleBarTop');
    }

    // function to start auto play
    function startSlider() {
      sliderIntervalID = setInterval(function() {
        nextSlide();
      }, set.slidePause);
    }

    // on mouseover stop the autoplay
    $slider.mouseover(function() {
      if (set.autoPlay === "on") {
        clearInterval(sliderIntervalID);
      }
    });

    // on mouseout starts the autoplay
    $slider.mouseout(function() {
      if (set.autoPlay === "on") {
        startSlider();
      }
    });

    //on right arrow click
    $slider.find("> .right").click(nextSlide)

    //on left arrow click
    $slider.find("> .left").click(prevSlide);

    // Go to next slide
    function nextSlide() {
      position = $slider.find(".show").index() + 1;
      if (position > size - 1) position = 0;
      changeCarousel(position);
    }

    // Go to previous slide
    function prevSlide() {
      position = $slider.find(".show").index() - 1;
      if (position < 0) position = size - 1;
      changeCarousel(position);
    }

    //when user clicks slider button
    $slider.find(" > ul > li").click(function() {
      position = $(this).index();
      changeCarousel($(this).index());
    });

    //this changes the image and button selection
    function changeCarousel() {
      $slider.find(".show").removeClass("show").fadeOut();
      $slider
        .find("> div")
        .eq(position)
        .fadeIn(set.fadeSpeed)
        .addClass("show");
      // The Dots
      $slider.find("> ul").find(".showli").removeClass("showli");
      $slider.find("> ul > li").eq(position).addClass("showli");
    }

    return $slider;
  };
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="why">
  <div class="slider" id="slider1">
    <div style="background-image:url(https://via.placeholder.com/150/0000FF); background-color: #e0e1dd;"></div>
    <div style="background-image:url(https://via.placeholder.com/150/FF0000); background-color: #e0e1dd;"></div>
    <div style="background-image:url(https://via.placeholder.com/150/00FF00); background-color: #e0e1dd;"></div>
    <div style="background-image:url(https://via.placeholder.com/150/000000); background-color: #e0e1dd;"></div>
    <i class="left" class="arrows" style="z-index:2; position:absolute;"><img src="cps-images/home-circle-left.png" id="lefticon"></i>
    <i class="right" class="arrows" style="z-index:2; position:absolute;"><img src="cps-images/home-circle-right.png" id="righticon"></i>
  </div>
  <script src="cps-js/nbi-home-promo-slider.js"></script>
</div>

Comments

Comment posted by WOUNDEDStevenJones

Could you also include

Comment posted by Refilon

Can you provide a working jsfiddle?

Comment posted by WOUNDEDStevenJones

You

Comment posted by WOUNDEDStevenJones

While this looks like it would work, it’s not very accessible, so it should probably be redone using

Comment posted by Brad

This solution worked great! Thanks! Accessibility isn’t a concern. But one last thing, how do I get the cursor to turn into a “hand icon” when hovering over the image? Right now there’s no visible indication that it is clickable.

Comment posted by Ujlm

You can change the cursor in the css:

By