I have a working carousel that contains a form and 3 images, I would like the carousel to be larger than it is (I thought if i didnt define the height and width it would be the size of the images but this hasnt worked), I want the form to appear in the center of the carousel, at the minute it is on the left, even though i have float:center i also experimented with padding but nothing seems to work. I have attached my code below, can anyone give me advice on 1) how to position the form to where i want within the carousel
2) how to make the carousel be the size of the images or larger than it is at the minute.
Any help would be much appreciated...
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
margin: auto;
}
</style>
</head>
<body>
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="span8" style="float:center; margin:0px, 0px, 0px, 20px;">
<form role="form" name="login" action="login.php" method="POST" style="align-center" >
Username<br><input type="text" name="Username" /></br>
Password<br><input type="password" name="Password" /></br>
<br><input type="submit" value="Login" name="login" />
<br>
<br>
<br>
</form>
</div>
</div>
<div class="item">
<img src="UUJ.jpg" alt="UUJ">
</div>
<div class="item">
<img src="UU2.jpg" alt="UU2">
</div>
<div class="item">
<img src="UU3.jpg" alt="UU3">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
To center the form you have to set width with margin-left: auto and margin-right: auto
<div class="span8" style="width: 500px; margin-right: auto; margin-left: auto;">
<!-- your form goes here -->
</div>
Related
is it possible to make a carousel with passed parameters? what i am trying to do is dynamically create a carousel from the items passed to it.
the code is smarty php code that is passing text into the bootstrap code. below is the smarty code.
{iterate from=news item=item}
{$item->getSubject()}
{$item->getIntroText()}
{$item->getText()}
{/iterate}
my bootstrap code is below. I tried playing around with the placement of the smarty iterate code in different places, but I keep getting one large container with multiple carousel items one below the other. what i really want to do is get one container that displays one carousel item and then users can click the carousel navigation links to cycle through all items.
any advice or help appreciated.
{iterate from=news item=item}
<div class="container news-carousel">
<!-- cont 1 -->
<div class="row w-100">
<!-- row -->
<div class="col">
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- start carousel -->
<ol class="carousel-indicators"> <!-- this this deteminse the little items below not sure we need them-->
<li data-target="#carousel" data-slide-to="0" class="active"></li>
</ol>
<div class="carousel-inner rounded">
<div class="carousel-item active">
<div class="row w-100 p-0 m-0">
<div class="col p-2 m-3 ">
<h5 class="font-weight-bold" >{$item->getSubject()}</h5>
<p class="m-2 p-2" >{$item->getIntroText()}</p>
{if $item->getText()}
<a class="text-info text-capitalise p-1" href="{url page="index" op="newsDetails" path=$item->getNewsId()}">
read more
</a>
{/if}
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- close carousel inner -->
</div> <!-- carousel close -->
</div>
</div>
</div><!-- cont 1 -->
{/iterate}
revised code
...
<!-- we make a new bloc -->
{iterate from=news item=item}
<div class="container">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<p>{$item->getSubject()}</p>
<p>{$item->getIntroText()}</p>
{if $item->getText()}
Read more
{/if}
</div>
</div>
</div>
</div>
{/iterate}
...
I have problem regarding register the route of slash in web.php, it gives me error that my route is not defined. Route [/] not defined. is there way to register my slash to the web.php? my main point here is when the user access the url http://localhost:8000/ the redirection will go to the index controller.
I will share to you guys my controller and my web.php
Web.php
Route::get('/', 'HomeController#index')->name('index');
Controller:
public function index() {
return view('index')
}
index.blade.php
#extends('layouts.app')
#section('content')
<!-- <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{asset('assets/W4_Double_bucket_EN.jpg')}}" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="{{asset('assets/BBQ_Big_Crunch_Banner_en.jpg')}}" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<br><br><br> -->
<!-- Scroll to Top Button-->
<div id="wrapper" >
<!-- Sidebar -->
<!-- End of Sidebar -->
<div class="container-fluid">
<br><br><br><br>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{asset('assets/W4_Double_bucket_EN.jpg')}}" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="{{asset('assets/BBQ_Big_Crunch_Banner_en.jpg')}}" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<br><br><br>
<div class="row">
<div class="col-md-3">
<div class="card shadow ">
<div class="card-header bg-danger">
<b style=" font-weight: 500; font-size:14px; color:white;"><i class="far fa-comments"></i> Recent Posts</b>
</div>
<div class="card-body">
<h5 class="card-title" style="font-size:15px; font-weight: 400; color:black;">Special title treatment</h5>
<p class="card-text" style="color:#757a91; font-size:14px;">With supporting text below as a natural lead-in to additional content.</p>
<hr></hr>
</div>
</div>
<br/>
<div class="card shadow">
<div class="card-header bg-danger" >
<b style=" font-weight: 500; font-size:14px; color:white;"><i class="far fa-user"></i> RGM Corner</b>
</div>
<div class="card-body">
<h5 class="card-title">
<div>
<h5 class="card-title" style="font-size:15px; font-weight: 400; color:black;">Special title treatment</h5>
<div class="postDate" style="font-size:11px; color:#999;">2d ago</div>
</div>
</h5>
<p class="card-text" style="color:#757a91; font-size:14px;">With supporting text below as a natural lead-in to additional content.</p>
<a class="nav-link" href="#" style="color:#757a91; font-size: 13px;"><i class="far fa-thumbs-up" style="color:#757a91; font-size:13px;"></i> 2 Likes</a>
<hr></hr>
<br/>
<h5 class="card-title">
<div>
<h5 class="card-title" style="font-size:15px; font-weight: 400; color:black;">Special title treatment</h5>
<div class="postDate" style="font-size:11px; color:#999;">2d ago</div>
</div>
</h5>
<p class="card-text" style="color:#757a91; font-size:14px;">With supporting text below as a natural lead-in to additional content.</p>
<a class="nav-link" href="#" style="color:#757a91; font-size: 13px;"><i class="far fa-thumbs-up" style="color:#757a91; font-size:13px;"></i> 2 Likes</a>
<hr></hr>
</div>
</div>
<br><br>
</div>
<div class="col-md-6">
<div class="card shadow ">
<div class="card-body">
<p class="card-title">
<div class="row">
<div class="col-md-1"> <img src="{{asset('assets/rounded_image.jpg')}}" style="height:40px;,width:40px;" class="rounded-circle" alt="..."/></div>
<div class="col-md-4">
<div style="line-height: 1.3;">
<div class="postName" style="color:#900; font-weight: 500; font-size:14px;">Ronald Perpekto</div>
<div class="postPosition" style="font-size:12px; color:#999;">Operations</div>
<div class="postDate" style="font-size:11px; color:#999;">2d ago</div>
</div>
</div>
</div>
<hr></hr>
</p>
<p class="card-text" style="color:#757a91; font-size:13px;">As a pre-emptive measure to ensure the safety of our people most especially our students, from the onslaught of Typhoon Tisoy that is predicted</p>
<p class="card-text">
<img class="d-block w-100" src="{{asset('assets/BBQ_Big_Crunch_Banner_en.jpg')}}"></img>
</p>
</div>
<div class="card-footer text-muted">
<div class="row">
<div class="col-md-6">
<div class="row">
<a class="nav-link" href="#" style="color:#757a91; font-size:13px;"><i class="far fa-thumbs-up" style="color:#757a91; font-size:13px;"></i> 2 Likes</a>
<a class="nav-link" href="#" style="color:#757a91; font-size: 13px;"><i class="far fa-comments" style="color:#757a91; font-size:13px;"></i> 50 Comments</a>
</div>
</div>
</div>
</div>
</div>
<br/>
<div class="card shadow">
<div class="card-body">
<p class="card-title">
<div class="row">
<div class="col-md-1"> <img src="{{asset('assets/rounded_image.jpg')}}" style="height:40px;,width:40px;" class="rounded-circle" alt="..."/></div>
<div class="col-md-4">
<div style="line-height: 1.3;">
<div class="postName" style="color:#900; font-weight: 500; font-size:14px;">Ronald Perpekto</div>
<div class="postPosition" style="font-size:12px; color:#999;">Operations</div>
<div class="postDate" style="font-size:11px; color:#999;">2d ago</div>
</div>
</div>
</div>
<hr></hr>
</p>
<p class="card-text" style="color:#757a91; font-size:13px;">As a pre-emptive measure to ensure the safety of our people most especially our students, from the onslaught of Typhoon Tisoy that is predicted</p>
<p class="card-text">
<img class="d-block w-100" src="{{asset('assets/W4_Double_bucket_EN.jpg')}}" style="height:40,width:40"></img>
</p>
</div>
<div class="card-footer text-muted">
<div class="row">
<div class="col-md-6">
<div class="row">
<a class="nav-link" href="#" style="color:#757a91; font-size: 13px;"><i class="far fa-thumbs-up" style="color:#757a91; font-size: 13px;"></i> 2 Likes</a>
<a class="nav-link" href="#" style="color:#757a91; font-size: 13px;"><i class="far fa-comments" style="color:#757a91; font-size: 13px;"></i> 50 Comments</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card shadow">
<div class="card-header bg-danger">
<b style=" font-weight: 500; font-size:14px; color:white;"><i class="far fa-calendar"></i> What's Happening </b>
</div>
<div class="card-body">
<h5 class="card-title" style="font-size:15px; font-weight: 400; color:black;">Special title treatment</h5>
<p class="card-text" style="color:#757a91; font-size:14px;">With supporting text below as a natural lead-in to additional content.</p>
<hr></hr>
</div>
</div>
<br/>
<div class="card shadow">
<div class="card-header bg-danger">
<b style=" font-weight: 500; font-size:14px; color:white;"><i class="far fa-file"></i> Recommended Pages</b>
</div>
<div class="card-body">
<p class="card-text">
<div class="row">
<div class="col-md-2"><i class="fa fa-bicycle fa-2x" style="background: #f3f3f3; padding:9px; border-radius: 50%;"></i></div>
<div class="col-md-9">
<div style="line-height: 1.3; margin-left:0px;">
<div class="postName" style="font-weight: 400; color:black; font-size:15px;">Hiflyer Website</div>
<div class="postPosition" style="font-size:12px; color:#999;">https://www.hiflyer.ca/</div>
<div class="postDate" style="font-size:11px; color:#999;">2019</div>
</div>
</div>
</div>
</p>
<p class="card-text">
<div class="row">
<div class="col-md-2"><i class="fas fa-desktop fa-2x" style="background: #f3f3f3; padding:9px; border-radius: 50%;"></i></div>
<div class="col-md-9">
<div style="line-height: 1.3; margin-left:0px;">
<div class="postName" style="font-weight: 400; color:black; font-size:15px;">Customer Display</div>
<div class="postPosition" style="font-size:12px; color:#999;">https://icweb.hiflyer.ca/CustomerDisplay</div>
<div class="postDate" style="font-size:11px; color:#999;">2019</div>
</div>
</div>
</div>
</p>
</div>
</div>
<br/>
<div class="card shadow">
<div class="card-header bg-danger">
<b style=" font-weight: 500; font-size:14px; color:white;"><i class="far fa-calendar"></i> Upcoming Events </b>
</div>
<div class="card-body">
<h5 class="card-title" style="font-size:15px; font-weight: 400; color:black;">Special title treatment</h5>
<p class="card-text" style="color:#757a91; font-size:14px;">With supporting text below as a natural lead-in to additional content.</p>
<hr></hr>
</div>
</div>
<br/>
</div>
</div>
</div>
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<br><br><br><br>
#endsection
Error:
Somewhere in your index.blade.php file you are using a route link like this route('/') and thats wrong (in your case).
In the route() function you need to enter the url name (in your case 'index') instead of the url path. So if you change route('/') to route('index') it work's.
Check the index.php file you've added {{ route('/') }} but in web.php file there is no route as the same name.
So, replace {{ route('/') }} to {{ route('index') }} in index.php file.
Or with url you can define it as below.
{{ url('/') }}
check with this change
Route::get('/', 'HomeController#index');
When i look at you error screenshot which you've mentioned,i saw Authenticate.php
So i think you need to set home url over there
<?php
namespace App\Http\Middleware;
use Illuminate\Auth\Middleware\Authenticate as Middleware;
use Illuminate\Support\Facades\Request;
class Authenticate extends Middleware
{
/**
* Get the path the user should be redirected to when they are not authenticated.
*
* #param \Illuminate\Http\Request $request
* #return string
*/
protected function redirectTo($request)
{
if (! $request->expectsJson()) {
return route('index');
// by default it's : return route('login'); you might have changed here
}
}
}
I create more than one slider dynamically using php but prev or next button is working only in first slider and not in rest slider due to having same class in control, other ones are not working. Please help me to fix this.
here is my slider code with php
if($counter == 0)
{
//$image_path='<div class="panel-body" style="background-image: url('.$rowu['event_image'].');>';
$Indicators ='<li data-target="#carousel-example-generic" data-slide-to="'.$counter.'" class="active"></li>';
$slides = '<div class="item active" >
<div class="container-fluid" style="marign:0px;padding:0px; background-image: url('.$rowu['event_image'].');">
<div class="highlighted">'.$event_category.'</div>
<div class="highlighted">'.$event_city.'</div>
<div class="highlighted">'.date_format($startDate,'d F').'</div>
<div class="pull-right" style="margin-top:270px">
Book
</div>
</div>
</div>';
}
else{
//$image_path .='<div class="panel-body" style="background-image: url('.$rowu['event_image'].');>';
$Indicators .='<li data-target="#carousel-example-generic" data-slide-to="'.$counter.'"></li>';
$slides .= '<div class="item">
<div class="container-fluid" style="marign:0px;padding:0px; background-image: url('.$rowu['event_image'].');">
<div class="highlighted">'.$event_category.'</div>
<div class="highlighted">'.$event_city.'</div>
<div class="highlighted">'.date_format($startDate,'d F').'</div>
<div class="pull-right" style="margin-top:270px">
Book
</div>
</div>
</div>';
}
$counter++;
}
echo '
<div class="panel panel-default" style="font-family: Futura,Trebuchet MS,Arial,sans-serif;">
<!-- panel body where slider will work -->
<div class="panel-body">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
'.$Indicators.'
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
'.$slides.'
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
`
each slider should have a unique ID
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
as you see it controls #carousel-example-generic
Also it's same for bullets
<li data-target="#carousel-example-generic" data-slide-to="'.$counter.'"></li>
data-target define the slider.
I've used Bootstrap carousel in my webpage but there is a problem in the slides. The first image slides with content, second is blank, then third image slides, then third image there is blank page slide.
My code:
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" ></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img src="/site/img/daa.jpg" >
</div>
<div class="item">
<img src="/site/img/2.jpg" >
</div>
<div class="item active">
<img src="/site/img/grad.jpg" >
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
No margins, no padding, no .left or .right , and finally no spaces in the code..
What could the problem be?
Your code has some issues im edited your code Look at new updated and now you can understand Bootstrap Carousel Plugin
The Carousel plugin is a component for cycling through elements, like a carousel (slideshow).
Learn more about it W3SCHOOL
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="http://s32.postimg.org/osirordf9/2_black_wallpaper_pattern_preview.jpg" alt="First slide">
<div class="container">
</div>
</div>
<div class="item">
<img class="second-slide" src="http://s32.postimg.org/osirordf9/2_black_wallpaper_pattern_preview.jpg" alt="Second slide">
<div class="container">
</div>
</div>
<div class="item">
<img class="third-slide" src="http://s32.postimg.org/osirordf9/2_black_wallpaper_pattern_preview.jpg" alt="Third slide">
<div class="container">
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class
Thanks for your interest. I've used fiddle and tested my carousel, it worked fine there,
so after more effort, I detected the problem. It was because I have css file with
.next,.prev{
display: none !important;
}
but I don't understand deeply why it causes blank slide, not only white sides in my slides!
thanks again
I am making a dynamic slider with laravel. I need to slide content and image that are in database. Everything is well but I have a gap(white space) between the slides. The first image slides with content, second is blank and after sometime third image slides and after third image there is blank page slide.
I have two images in database and in folder. The image should slides frequently one after another but this is not happening.
I may have a mistake in my if else statement.
my html code for slider is like this,it works well
<section>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="bnr-img">
<img src="css/images/banner.jpg" alt="..." style="width:100%;">
<div class="carousel-caption">
Group com Family Hospitalization<br> Insurance
</div>
</div>
<h1>"We will be there when you need us most"</h1>
</div>
<div class="item">
<div class="bnr-img">
<img src="css/images/bnr-medi.jpg" alt="..." style="width:100%;">
<div class="carousel-caption">
Health Insurance
</div>
</div>
<h1>"Securing Your Health"</h1>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control arw1" href="#carousel-example-generic" role="button" data-slide="prev">
<img src="css/images/arw-left.png" class="img-responsive">
</a>
<a class="right carousel-control arw1" href="#carousel-example-generic" role="button" data-slide="next">
<img src="css/images/arw-right.png" class="img-responsive">
</a>
</div>
</section><!--Slider end-->
my code for dynamic slider is like this:
<h2>services</h2>
<div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner inner" role="listbox">
#if(isset($services))
#foreach($services as $service)
<div class="item active">
</div>
<div class="item">
<div class="col-md-4">
<img src="frontend/services/{{$service->image}}">
</div>
<div class="col-md-8">
<p>
<span class="hilights2">{{$service->title}}</span><br>
{{$service->description}}
Read More
</p>
</div>
</div>
#endforeach
#endif
</div>
<!-- Controls -->
Most likely you have some unwanted margin on one of your elements. Try right clicking and hitting inspect element to see which element is taking up the whitespace, and then using css to set margin:0;
I have had the same problem,
when i figured the solution it was I've css file with code
.next,.prev{
display: none !important;
}
Regards