CODEWITHSUNDEEP
javascriptjquery
user8819214
user8819214

Reputation:

Creating a div slider in jquery

I am trying to make an image change when I click on a piece of text on a website that I am building. At this moment I have created a class called device with one of them being device active as shown below:

  <div class="col-md-3">
        <div class="device active">
          <img src="app/assets/images/mockup.png" alt="">
        </div>
        <div class="device">
          <img src="app/assets/images/mockup.png" alt="">
        </div>
        <div class="device">
          <img src="app/assets/images/mockup.png" alt="">
        </div>

    </div>

And then what i am currently trying to do is remove the class of active when I click on some text with the i.d of #search2. This is my whole jquery script so far:

$("#search2").click(function() {
  var currentImage = $('.device.active');

  var nextImage = currentImage.next();

  currentImage.removeClass('active');

});

However this does not seem to remove the class of active and the image is still displayed? any ideas?

Upvotes: 0

Views: 263

Answers (2)

Andrei Rosu
Andrei Rosu

Reputation: 1387

Your selection is done right and it is working for me (the active class is removed from that item). The problem must be somewhere else in your code.

Here is an alternative:

var activeDeviceIndex = 0;

$("#search2").click(function() {
	var devicesContainer = $('.device');
	$(devicesContainer[activeDeviceIndex]).removeClass('active');
	activeDeviceIndex === devicesContainer.length - 1 ? activeDeviceIndex = 0 : activeDeviceIndex++;
	$(devicesContainer[activeDeviceIndex]).addClass('active');
});
.device {
  display: none;
}

.device.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
      <div class="device active">
        <p>Device 1</p>
      </div>
      <div class="device">
        <p>Device 2</p>
      </div>
      <div class="device">
        <p>Device 3</p>
      </div>
  </div>
  
  <button id="search2">click</button>

Upvotes: 1

Harrison Ifeanyichukwu
Harrison Ifeanyichukwu

Reputation: 292

Check on the following, the id on the button to click should be search2 and not #search2, may be just typo stuffs.

after that update your code as follows

/**
*@description - gets the next image to slide, if the last image is the current image, it will loop the sliding
*@param {Element} current - the currently active image
*@param {Boolean} islooped - boolean value indicating if a looping just started
*/
var nextImage = function(current, islooped) {
    var next = islooped? current : current.nextSibling;
    while(next && next.nodeName.toLowerCase() !== 'div') {
        next = next.nextSibling;
    }
    next = next? next : nextImage(current.parentNode.firstChild, true);
    return next;
};
$('#search2').bind('click', function(event) {
    var current = $('.device.active').removeClass('active').get(0);
    var next = nextImage(current, false);
    $(next).addClass('active');
});

Upvotes: 0

Related Questions