#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2015
    Posts
    64
    Rep Power
    5

    best way to create slideshow structure


    Hi all,

    I wanna create a slideshow with fade in/out effect that looks like Imgur: The most awesome images on the Internet
    The slideshow has to be inside a modal (which I have)
    I'm not sure about the easiest way to do that. I was thinking about taking advantage of bootstrap carousel but I can't recreate the structure as shown in the picture, then I was thinking about making one from scratch.
    I need avise about the best structure to use. I don't need it to be responsive for small screens but I'd like it to keep it reasonably proportional for laptops screen (also, the pics will all have the same dimension therefore the modal-body does not have to resize).

    Untitled.png

    I thought about creating something like:

    item
    - pic
    - side
    - - buttons
    - - caption
    /item

    but then I should repeat the buttons for each slide and link each signle button to the prev/next pic not dynamically

    if I do something like

    item
    - pic
    - side
    - - caption
    - buttons
    /item

    I can use the same buttons for all the slides but I can't position them properly in the top right

    any hint is welcome

    you can find my not successful experiment with the bs carousel here (click on first flower to open modal)

    Simona's project

    thanks!
    Last edited by balux; July 30th, 2016 at 07:57 AM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2015
    Posts
    64
    Rep Power
    5
    anyone?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2015
    Posts
    64
    Rep Power
    5
    ok I managed to make some progress by customizing bootstrap but of course it displays well only in my screen..as soon as I change it, the position of the carousel controls is screwed

    pleeeeease help!!

    this is my HTML

    Code:
    <div id="slideshow" class="modal fade in" role="dialog">
    	<div class="modal-content">
    		<div class="modal-header">
    			<h2 class="modal-title">Title</h2>
    		</div> <!-- modal-header -->
    		<div class="modal-body">
    			<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
    				<div class="carousel-inner">
    					<div class="item active">
    						<div class="container">
    							<div class="row">
    								<div class="col-lg-7">
    									<div class="slide-image">
    										<img src="img/pic2.png" class="img-responsive" alt="PIC 1">
    									</div>
    								</div>
    								<div class="col-lg-5">
    									<div class="slide-content">
    										<h1> VIA VIA </h1>
    										<p> utilities included </p>
    									</div>
    								</div>
    
    							</div>
    						</div>
    					</div>
    					<div class="item">
    						<div class="container">
    							<div class="row">
    								<div class="col-lg-7">
    									<div class="slide-image">
    										<img src="img/pic2.png" class="img-responsive" alt="PIC 1">
    									</div>
    								</div>
    								<div class="col-lg-5">
    									<div class="slide-content">
    										<h1> MAO MAO </h1>
    										<p> Lorem Ipsum lorem </p>
    									</div>
    								</div>
    
    							</div>
    						</div>
    					</div>
    				</div>
    
    				<div class="controlsBlock">
    					<div class="controls">
    						<a class="left carousel-control" href="#myCarousel" data-slide="prev">
    							<span class="glyphicon glyphicon-chevron-left"></span>
    						</a>
    						<a class="right carousel-control" href="#myCarousel" data-slide="next">
    							<span class="glyphicon glyphicon-chevron-right"></span>
    						</a>
    						<a class="close carousel-control" data-dismiss="modal" type="button">
    							<span class="glyphicon glyphicon-remove"></span>
    						</a>
    					</div>
    				</div>
    				<ol class="carousel-indicators">
    					<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    					<li data-target="#myCarousel" data-slide-to="1"></li>
    				</ol>
    
    			</div> <!-- myCarousel -->
    
    		</div> <!-- modal-body -->
    	</div> <!-- modal-content -->
    </div> <!-- slideshow -->
    this is my CSS

    Code:
    .controlsBlock {
        position: relative;
        display: block;
    
        margin: 0 auto;
        z-index: 1;
        height: 24px;
        text-align: center;
    }
    
    
    .carousel-control {
        position: relative;
        background: #fff;
        font-size: 5px;
        background: none !important;
        color: #fff !important;
        text-align: center;
    }
    
    .carousel-control.left {
        left: 60% !important;
        margin-top: -27% !important;
        height: 50px;
        width: 50px;
    }
    
    .carousel-control.close {
        font-size: 25px;
        left: 60% !important;
        margin-top: -23% !important;
        height: 50px;
        width: 50px;
    }
    
    .carousel-control.right {
        right: 37% !important;
        margin-top: -30% !important;
        height: 50px;
        width: 50px;
    }
    
    .carousel-control:hover,
    .carousel-control:focus {
        color: red !important;
    }
    
    .carousel-control .glyphicon-chevron-left,
    .carousel-control .glyphicon-chevron-right {
        position: absolute;
        z-index: 5;
        display: inline-block;
    }

IMN logo majestic logo threadwatch logo seochat tools logo