JQuery Cycle2 - How to rename class

See more:

HTML

jQuery

I use the JQuery slider Cycle2 :- http://jquery.malsup.com/cycle2

, and have 2 different slideshows running on the same page. Everything is working fine but the slideshow div class name is common for both i.e. 'cycle-slideshow'. If I rename it the slideshow won't work.

I need to rename one of the slideshows class as I have a function that add images according to the class name, since they have got both same name the images are added on both slideshows while I only want one to have more images added.



1st slideshow :

 <div class="cycle-slideshow" 
			data-cycle-fx=scrollHorz
			data-cycle-timeout=1500
		        data-cycle-center-horz=true
			data-cycle-center-vert=true
		>	
		
                <img src="./upload/003.gif">
		<img src="./upload/005.gif">
				
</div>

2nd slide show

<div class="cycle-slideshow"
		data-cycle-fx="fadeOut"
		data-cycle-pause-on-hover="true"	
		data-cycle-speed="500"
		data-cycle-timeout="7500"
		data-cycle-auto-height="false"					
		>
		
		<img src="./assets/images/title_image1.jpg" >
		<img src="./assets/images/title_image2.jpg">      
		<img src="./assets/images/title_image3.jpg"> 
		<img src="./assets/images/title_image4.jpg">
		<img src="./assets/images/title_image14.jpg"/>
		</div>

                <button  önclick="c()">Add more images</button>

function to add images:-

<script>
var images = [
    '<img src="./assets/images/title_image6.jpg">',
    '<img src="./assets/images/title_image7.jpg">',
    '<img src="./assets/images/title_image8.jpg">'
];

function c() {

    for (var i=0; i < images.length; i++) {
        $('.cycle-slideshow').cycle('add', images[i]);
    }
    $(this).prop('disabled', true)
}
</script>