How to use the same slider for different divs (combine 3 individual function to one function in jquery)

Question

I have a website where I show 3 "draws". In each draw there are pictures which are shown full screen. With a function you can switch between the draws. In each draw you can move a slider (uislider) to show older pictures. At the moment I have 3 times the same function (of course with different classes) and 3 times a slider (in each draw). It works but I want to combine them to one function and to one slider which navigates me through the pictures of the shown draw. If you change the draw and come back the slider should keep the position.

Here is my code:

HTML:

    <div class="drawSelect3"> 

        <div class="draw3">
                <img src="Bilder/03/03_01.03.16.jpg"/>
                <img src="Bilder/03/03_01.02.16.jpg"/>
                <img src="Bilder/03/03_01.01.16.jpg"/>      
        </div>

        <div class="TimeS">
                <div class="slider3"></div>
        </div>

    </div>  


    <div class="drawSelect2"> 

        <div class="draw2">
                <img src="Bilder/02/02_01.03.16.jpg"/>
                <img src="Bilder/02/02_01.02.16.jpg"/>
                <img src="Bilder/02/02_01.01.16.jpg"/>  
        </div>

        <div class="TimeS">
                <div class="slider2"></div>
        </div>

    </div>


    <div class="drawSelect1"> 

        <div class="draw1">
                <img src="Bilder/01/01_01.03.16.jpg"/>
                <img src="Bilder/01/01_01.02.16.jpg"/>
                <img src="Bilder/01/01_01.01.16.jpg"/>

        </div>

        <div class="TimeS">
                <div class="slider slider1"></div>
        </div>

    </div>

JQUERY:

$(".draw1 img").hide();
$(".draw1 img:first").show();
$( ".slider1" ).slider({
        animate: "slow",
        ondragstart: true,
        isRTL: true,
        value:  0,

        min: 0,
        max: $(".draw1 img").length - 1,
        step: 1,

        slide: function( event, ui ) {
            $(".draw1 img").hide();
            $(".draw1 img:eq("+ui.value+")").show();
        }
    });


$(".draw2 img").hide();
$(".draw2 img:first").show();
$( ".slider2" ).slider({
        animate: true,
        ondragstart: true,
        isRTL: true,
        value:  0,

        min: 0,
        max: $(".draw2 img").length - 1,
        step: 1,

        slide: function( event, ui ) {
            $(".draw2 img").hide();
            $(".draw2 img:eq("+ui.value+")").show();
        }
    });

$(".draw3 img").hide();
$(".draw3 img:first").show();
$( ".slider3" ).slider({
        animate: true,
        ondragstart: true,
        isRTL: true,
        value:  0,

        min: 0,
        max: $(".draw3 img").length - 1,
        step: 1,

        slide: function( event, ui ) {
            $(".draw3 img").hide();
            $(".draw3 img:eq("+ui.value+")").show();
        },
        change: function(event, ui) {       
        }
    });

thanks so much for your help!

Answer 1

You can create one function that takes two parameters, the draw div, then the corresponding slider div.

draw(".draw1", ".slider1");
draw(".draw2", ".slider2");
draw(".draw3", ".slider3");

function draw(drawdiv, sliderdiv) {
    $(drawdiv + " img").hide();
    $(drawdiv + " img:first").show();
    $( sliderdiv ).slider({
        animate: true,
        ondragstart: true,
        isRTL: true,
        value:  0,

        min: 0,
        max: $(drawdiv + " img").length - 1,
        step: 1,

        slide: function( event, ui ) {
            $(drawdiv + " img").hide();
            $(drawdiv + " img:eq("+ui.value+")").show();
        },
        change: function(event, ui) {}
    });
}

Example written here:
http://codepen.io/EskoCruz/pen/ENBxVw/