如何让这个滑块有前两个大图然后在两列?

时间:2015-06-05 12:22:04

标签: jquery html css

我有这个网站:

EN:link

RU:link

每页都有一张幻灯片

俄语滑块没关系,你不需要做任何改动。俄语滑块,前3张图片很棒,然后是两列。

英文滑块不行。我想成为前两张图片,然后是两列。

RU中幻灯片的代码HTML:

<div id="slider" class="home-blocks ru-slide">
    <div id="left-slide">
        <img alt="" src="{{media url="wysiwyg/mos-banner-promotion-27-05-15-2.jpg"}}" />
        <a href="special-projects">
            <img alt="" src="{{media url="wysiwyg/ballet5.png"}}" />
        </a>
        <a href="special-projects">
            <img alt="" src="{{media url="wysiwyg/ballet6.png"}}" />
        </a>
        <img alt="" src="{{media url="wysiwyg/444_1.jpg"}}" />
    </div>

    <div id="right-slide">
        <img alt="" src="{{media url="wysiwyg/17.jpg"}}" />
        <img alt="" src="{{media url="wysiwyg/17.jpg"}}" />
        <img alt="" src="{{media url="wysiwyg/22.jpg"}}" />
        <img alt="" src="{{media url="wysiwyg/1.jpg"}}" />
    </div>
</div>

欧盟幻灯片的代码HTML

<div id="slider" class="home-blocks en-slide">
    <div id="left-slide">
        <a href="special-projects">
             <img alt="" src="{{media url="wysiwyg/ballet5.png"}}" />
        </a>
        <a href="special-projects">
            <img alt="" src="{{media url="wysiwyg/ballet6.png"}}" />
        </a>
      <img alt="" src="{{media url="wysiwyg/444_1.jpg"}}" />
    </div>
    <div id="right-slide">
        <img alt="" src="{{media url="wysiwyg/17.jpg"}}" />
        <img alt="" src="{{media url="wysiwyg/17.jpg"}}" />
        <img alt="" src="{{media url="wysiwyg/22.jpg"}}" />
        <img alt="" src="{{media url="wysiwyg/1.jpg"}}" />
    </div>
</div>

RU中的脚本JQuery滑块

if (jQuery('#slider').hasClass('ru-slide')) {
    if (index == -1 || index == 0 || index == 1) {
        jQuery('#left-slide').addClass('full-banner');
    } else {
        jQuery('#left-slide').removeClass('full-banner');
    }
} else {}

EN中的脚本JQuery滑块

if (jQuery('#slider').hasClass('en-slide')){
    if (index == 0 || index == 1){
        jQuery('#left-slide').addClass('full-banner');
    } else {
        jQuery('#left-slide').removeClass('full-banner');
    }
}

CODE CSS:

#left-slide{
    width:47.5%;
    float:left;
    overflow:hidden;
}
#right-slide{
    float:right;
    width:47.5%;
}

.full-banner{
    width:100% !important;
}

再次......我希望滑块EN的前两张图片很大,而其余的图片是俄罗斯的两列......

我希望我设法让你明白他们想要什么。 你能帮我解决这个问题吗?

提前致谢!

0 个答案:

没有答案