locked
Javascript Slider Position Asp.net website RRS feed

  • Question

  • User502799924 posted

    I want to add slider on asp.net web project here is the javascrtipt that I found

    #sliderFrame, #sliderFrame div {
        box-sizing: content-box;
    }
    #sliderFrame 
    {
        ;
        width:700px;
        margin:0 auto; /*center-aligned*/
    
    
    }
    
    #slider, #slider div.sliderInner {
        width:700px;height:306px;/* Must be the same size as the slider images */
    }
    
    #slider {
    	background:#fff url(loading.gif) no-repeat 50% 50%;
    	;
    	margin:0 auto; /*center-aligned*/
    
        transform: translate3d(0,0,0);
        box-shadow: 0px 1px 5px #999999;
    
    }
    
    /* image wrapper */
    #slider a.imgLink, #slider div.video {
    	z-index:2;
    
    	;
    	top:0px;left:0px;border:0;padding:0;margin:0;
    	width:100%;height:100%;
    }
    #slider .video {
    	background:transparent url(video.png) no-repeat 50% 50%;
    }
    
    /* Caption styles */
    #slider div.mc-caption-bg, #slider div.mc-caption-bg2 {
    	;
    	width:100%;
    	height:auto;
    	padding:10px 0;/* 10px will increase the height.*/
    	left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
    	bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
    	z-index:3;
    	overflow:hidden;
    	font-size: 0;
    
    }
    #slider div.mc-caption-bg 
    {
        /* NOTE: Its opacity is to be set through the sliderOptions.captionOpacity setting in the js-image-slider.js file.*/
    	background:Black;/* or any other colors such as White, or: background:none; */
    }
    #slider div.mc-caption-bg2 {
        background:none;
    }
    #slider div.mc-caption {
    	font: bold 14px/20px Arial;
    	color:#EEE;
    	z-index:4;
    	text-align:center;
        background:none;
    }
    #slider div.mc-caption a {
    	color:#FB0;
    }
    #slider div.mc-caption a:hover {
    	color:#DA0;
    }
    
    
    /* ------ built-in navigation bullets wrapper ------*/
    /* Note: check themes\2\js-image-slider.css to see how to hide nav bullets */
    #slider div.navBulletsWrapper  {
        top:250px;/* Its position is relative to the #slider */
    	text-align:center;
    	background:none;
    	;
    	z-index:5;
    }
    
    /* each bullet */
    #slider div.navBulletsWrapper div 
    {
        width:11px; height:11px;
        font-size:0;color:White;/*hide the index number in the bullet element*/
        background:transparent url(bullet.png) no-repeat 0 0;
        display:inline-block; *display:inline; zoom:1;
        overflow:hidden;cursor:pointer;
        margin:0 6px;/* set distance between each bullet*/
    }
    
    #slider div.navBulletsWrapper div.active {background- -11px;}
    
    
    /* --------- Others ------- */
    
    #slider div.loading 
    {
        width:100%; height:100%;
        background:transparent url(loading.gif) no-repeat 50% 50%;
        filter: alpha(opacity=60);
        opacity:0.6;
        ;
        left:0;
        top:0; 
        z-index:9;
    }
    
    #slider img, #slider>b, #slider a>b {
    	; border:none; display:none;
    }
    
    #slider div.sliderInner {
    	overflow:hidden; 
    	-webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/
    	; top:0; left:0;
    }
    
    #slider>a, #slider video, #slider audio {display:none;}
    #slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}

    and this I wrote on my default.aspx file

    <div id="sliderFrame">
    <div id="slider">
    
    <img src="images/1.png" alt="TextHolder" />
    <img src="images/2.png" alt="TextHolder" />
    <img src="images/3.png" alt="TextHolder" />
    <img src="images/4.png" alt="TextHolder" />
    </div>
    
    </div>

    then in css I tried to put slider down with margin-top

    .sliderFrame{
    
    margin-top: 125px;}

    but didnt work.slider always moves together with navigator.I also tried to use margin-top in javascript but they both move together.I just want to move slider below navigator

    ss

    Monday, March 23, 2015 11:37 AM

Answers

  • User1918509225 posted

    Hi raymanastar,

    Thanks for your post here.

    First ,I suggest that you could press F12 ,click "DOM Explorer" to check css style.

    And if you still have issue,you could post your whole aspx page for us ,so that we could reproduce your issue in my side .

    Best Regards,

    Kevin Shen.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 23, 2015 10:21 PM