Home/ Questions/Q 8163363
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T19:00:57+00:00

I’m trying to set up a slider that uses just one control-menu (e.g. Item

  • 0

I’m trying to set up a slider that uses just one control-menu (e.g. Item 1 | Item 2 | Item 3) but affects both the background image and a div container with text in it.

Take a look at this example from SAP: http://www.sap.com/germany/index.epx
There you can click on this yellow squares and both, the text in the box and the background changes (even in the right aspect ratio).

I tried several slideshow plugins, such as jCarousel, Nivo Slider, bxSlider, … But because of my weak javascript skills, I don’t really have a clue of how to achieve my goal…

Anybody can help me?

Thanks,
Sebastian

EDIT:
Thanks for your replies! I tried your solutions and commented it (see below). In addition to that, I provide a link to the webpage I’m trying to get this effect working:
http://prism-informatics.com/new/#

For the background-sliding effect I use a library/script/module called “bgStretcher”. It provides preloading of bg-images, nice transition effects, and “live-scaling”…

And there’s a jCarousel in the center of the page (the white box with text in it like “IT-Strategy”). The best thing to happen would be, if you click on the controls below the box (the numbers “1” or “2”) then this tells the bgStretcher-script to slide to the appropriate bg-picture… because of my bad js skills, I don’t know if there’s a way to do that…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This new answer makes use of bgStretcher: (fiddle: http://jsfiddle.net/rNLEQ/)

    <!DOCTYPE html><html><head>

<link rel="stylesheet" type="text/css" href="http://www.ajaxblender.com/script-sources/bgstretcher-2/bgstretcher.css" />

<style>
.slider {
    background-color: white;
    width: 300px;
    margin: 100px;
    padding: 10px;
    border: 1px solid black;
}
.slider > div {
    display: none;
}
.slider > .control, .slider > .active {
    display: block;
}
.slider > .control li {
    display: inline;
    padding: 10px;
}
.slider > .control .showPage {
    font-weight: bold;
}​
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.ajaxblender.com/script-sources/bgstretcher-2/bgstretcher.js"></script>
<script>
jQuery(function($) {
    $('body').bgStretcher({
        images: [
            'http://prism-informatics.com/new/sites/all/themes/prism_new/images/bg1.jpg',
            'http://prism-informatics.com/new/sites/all/themes/prism_new/images/bg2.jpg',
            'http://prism-informatics.com/new/sites/all/themes/prism_new/images/bg3.jpg',
            'http://prism-informatics.com/new/sites/all/themes/prism_new/images/bg4.jpg',
        ],
        imageWidth: 1024, 
        imageHeight: 768, 
        nextSlideDelay: 8000,
        slideDirection: 'N',
        slideShowSpeed: 1000,
        transitionEffect: 'fade',
        sequenceMode: 'normal',
        buttonPrev: '#prev',
        buttonNext: '#next',
        pagination: '.control',
        anchoring: 'left center',
        anchoringImg: 'left center',
        preloadImg: true,
        callbackfunction: function() {
            var i = $('#bgstretcher .bgs-current').index('#bgstretcher li') + 1;
            $('.slider > div').removeClass('active');
            $('#slide'+i).addClass('active');
        }
    });
});
</script>
</head><body>

<p>Other content here.</p>

<div class="slider">
    <div id="slide1" class="active">
        <h2>One</h2>
        <p>Something you want to say 1.</p>
    </div>
    <div id="slide2">
        <h2>Two</h2>
        <p>Something you want to say 2.</p>
    </div>
    <div id="slide3">
        <h2>Three</h2>
        <p>Something you want to say 3.</p>
    </div>
    <div id="slide4">
        <h2>Four</h2>
        <p>Something you want to say 4.</p>
    </div>
    <div class="control"></div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

</body></html>
    • 0