Carousel Control in bootstrap

[Roopavathy]

Hi,

Here is my website :

http://odatrichy.org/index.php

In my carousel,there is some problem with carousel controls.At present I have commented the scripts from line 101.

If I uncomment them,both left and right controls are found adjacently.Please help me to fix it.

Thanks in advance.

[Nancy OShea · Accepted solution]

Fix your 17 code errors.  You have unbalanced tags that are causing problems. 

Showing results for http://odatrichy.org/index.php - Nu Html Checker

Nancy

[Roopavathy]

Hi ,

Thank you very much Nancy for pointing out the errors.I have corrected the errors .But still there is some problem with the <section> .Please help me to correct them.And also slider view is left aligned.I find space after the slider.Please help me to fix them.

Thanks in advance.

[Nancy OShea]

To center slider, remove comments around <div class="container"> which is 1 line above your carousel.  Check your code to ensure all <div> tags are closed.

[Roopavathy]

Yes,I have uncommented it,see now my slider looks like.I want the slider to be full width.

[Nancy OShea]

Your image is not wide enough to fill the screen

Change container to:

     <div class="container-fluid">

Add this to your custom CSS:

     .carousel img {width: 100%}

Nancy

[Roopavathy]

I did what you have said.I just got the image somewhat extended towards right and left but not to the full width .

[Nancy OShea]

Container-Fluid should be very close to full screen width. Maybe you need to remove the wrapper.   Wrapper is not a Bootstrap class so I don't know why you need it.

[Roopavathy]

Removed the class "wrapper".Still looks the same.

[Nancy OShea]

Like I said above, you must  change "container"  to "container-fluid"

When I do that, this is what I see.

[Roopavathy]

I did change this.

Change container to:

     <div class="container-fluid">

Add this to your custom CSS:

     .carousel img {width: 100%}

The slider does extend.But not to the whole ends towards right and left.

[Nancy OShea]

Containers leave a little space around the edges which is usually better for viewing on desktops.  If you don't want it, simply remove the <section> and <div> tags.

Nancy

[Roopavathy]

Thanks Nancy for all your responses.