2
\$\begingroup\$

My php page displays a slider of images and when the user clicks on an image(.item), the div below (#team_single) changes the content without reloading the page. Content of the div changes also when the user clicks the arrow of the slider (.slick-prev, .slick-next, .slick-arrow).

I'm looking for a way to improve the following code :

function team_push($image, $position, $sousposition, $title, $content) {
    $('#team_single .single-img').html($image);
    $('#team_single .position').html($position);
    $('#team_single .sousposition').html($sousposition);
    $('#team_single .title').html($title);
    $('#team_single .description').html($content);
}

var image = $('.slick-current').find("img").clone();
var position = $('.slick-current .position').html();
var sousposition = $('.slick-current .sousposition').html();
var title = $('.slick-current .title').html();
var content = $('.slick-current .content').html();
team_push(image, position, sousposition, title, content);

$('#team_slider .item').on('click', function(){
    var image = $(this).find("img").clone();
    var position = $(this).find('.position').html();
    var sousposition = $(this).find('.sousposition').html();
    var title = $(this).find('.title').html();
    var content = $(this).find('.content').html();
    team_push(image, position, sousposition, title, content);
});

$('#team_slider .slick-arrow').on('click', function(){
    var image = $('.slick-current').find("img").clone();
    var position = $('.slick-current .position').html();
    var sousposition = $('.slick-current .sousposition').html();
    var title = $('.slick-current .title').html();
    var content = $('.slick-current .content').html();
    team_push(image, position, sousposition, title, content);
});
$('#team_single .slick-prev').on("click", function(e){
    e.preventDefault();
    $('#team_slider').slick('slickSetOption', 'slidesToScroll', 1, true);
    $('#team_slider').slick('slickPrev');
    var image = $('.slick-current').find("img").clone();
    var position = $('.slick-current .position').html();
    var sousposition = $('.slick-current .sousposition').html();
    var title = $('.slick-current .title').html();
    var content = $('.slick-current .content').html();
    team_push(image, position, sousposition, title, content);
});
$('#team_single .slick-next').on("click", function(e){
    e.preventDefault();
    $('#team_slider').slick('slickSetOption', 'slidesToScroll', 1, true);
    $('#team_slider').slick('slickNext');
    var image = $('.slick-current').find("img").clone();
    var position = $('.slick-current .position').html();
    var sousposition = $('.slick-current .sousposition').html();
    var title = $('.slick-current .title').html();
    var content = $('.slick-current .content').html();
    team_push(image, position, sousposition, title, content);
});
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.