ResponsiveSlides如何使图像的宽度占据整个页面?

时间:2022-10-12 22:13:49

I want make that the width of images ocuppy entire page just like this:

我想让图像的宽度像整个页面一样:

http://i1240.photobucket.com/albums/gg491/Nerio_Navea/Screenshots/GoogleChrome2014-12-30220149_zps99e94bc2.png

but I can't find a property for this.

但我找不到这个属性。

I'm new using Jquery but I understand Javascript

我是新用Jquery但我理解Javascript

Please someone helpme with this

请有人帮忙

i'm new on *

我是*的新手

Sorry for my english ;D

抱歉我的英文; D

2 个解决方案

#1


1  

I don't know what exactly you want, but you can insert the image in a div, or use float so that your image can come out of the normal margins.

我不知道你想要什么,但是你可以将图像插入div中,或者使用float,这样你的图像就会超出正常的边距。

Here is what you can try (using in-line CSS):

以下是您可以尝试的内容(使用内联CSS):

<image src = " " style = "position: absolute; left:10; top: 100;">

Just specify the exact place where you want to place the image by writing the left and top co-ordinates in their respective places. This is what I got after reading your question.

只需在各自的位置写下左侧和顶部坐标,即可指定要放置图像的确切位置。这是我在阅读你的问题后得到的。

And, this way you can make your image occupy even the entire page.

而且,通过这种方式,您可以使图像占据整个页面。

#2


1  

If you're trying to craft a Responsive Slideshow this might be of some help. This is an example using Javascript/HTML to include a slideshow with your slider.

如果您正在尝试制作响应式幻灯片,这可能会有所帮助。这是一个使用Javascript / HTML在滑块中包含幻灯片的示例。

  1. Javascript Code

<!-- it works the same with all jquery version from 1.x to 2.x -->
<script src="jquery.min.js"></script>
<script src="jssor.slider.mini.js"></script>
<script>
    jQuery(document).ready(function ($) {
        //Define an array of slideshow transition code
        var _SlideshowTransitions = [
        { code1 },
        { code2 },
        { code3 }
        ];
        var options = {
            $AutoPlay: true,
            $SlideshowOptions: {
                    $Class: $JssorSlideshowRunner$,
                    $Transitions: _SlideshowTransitions,
                    $TransitionsOrder: 1,
                    $ShowLink: true
                }
        };
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);
    });
</script>

  1. HTML Code

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
        <div><img u="image" src="image1.jpg" /></div>
        <div><img u="image" src="image2.jpg" /></div>
    </div>
</div>

#1


1  

I don't know what exactly you want, but you can insert the image in a div, or use float so that your image can come out of the normal margins.

我不知道你想要什么,但是你可以将图像插入div中,或者使用float,这样你的图像就会超出正常的边距。

Here is what you can try (using in-line CSS):

以下是您可以尝试的内容(使用内联CSS):

<image src = " " style = "position: absolute; left:10; top: 100;">

Just specify the exact place where you want to place the image by writing the left and top co-ordinates in their respective places. This is what I got after reading your question.

只需在各自的位置写下左侧和顶部坐标,即可指定要放置图像的确切位置。这是我在阅读你的问题后得到的。

And, this way you can make your image occupy even the entire page.

而且,通过这种方式,您可以使图像占据整个页面。

#2


1  

If you're trying to craft a Responsive Slideshow this might be of some help. This is an example using Javascript/HTML to include a slideshow with your slider.

如果您正在尝试制作响应式幻灯片,这可能会有所帮助。这是一个使用Javascript / HTML在滑块中包含幻灯片的示例。

  1. Javascript Code

<!-- it works the same with all jquery version from 1.x to 2.x -->
<script src="jquery.min.js"></script>
<script src="jssor.slider.mini.js"></script>
<script>
    jQuery(document).ready(function ($) {
        //Define an array of slideshow transition code
        var _SlideshowTransitions = [
        { code1 },
        { code2 },
        { code3 }
        ];
        var options = {
            $AutoPlay: true,
            $SlideshowOptions: {
                    $Class: $JssorSlideshowRunner$,
                    $Transitions: _SlideshowTransitions,
                    $TransitionsOrder: 1,
                    $ShowLink: true
                }
        };
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);
    });
</script>

  1. HTML Code

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
        <div><img u="image" src="image1.jpg" /></div>
        <div><img u="image" src="image2.jpg" /></div>
    </div>
</div>