Carousel style with 3 slides

Question

I’m trying to make a kind of slider where the middle slide appears as main and the sides will cut according to the resolution, but I was having problems in the IE and incredible that it seems the customer uses IE8. To show what I just want to take a look at http://www.theva.com.br/teste

I tried to use this bxslider, I already touched it so much that I don’t know if it will actually solve the problem, at least for now it would only be these 3 slides Does anyone have any idea?

Screenshots: http://www.browserstack.com/screenshots/fcdbeaba0e7ce8485df57d0f9d3e06a27d185755

----------- Update 06/03 ---------------

Yeah, I’m still struggling, I don’t know if there’s just one thing missing, but continues with the wrong placement on IE8, I tried to tailor the CSS accordingly answer but must have a wrong parameter. The plugin changes the css by inline what I saw is that the pro IE treatment is different, which changes the left while the rest changes using the Transformation of css

----------- Update 07/03 ---------------

I made an IF especially for IE below the 10 with a different margin-left, but the problem that fits it with the screen resolution :/

----------- Update 07/03 ---------------

In reality the problem is when changes the resolution, I will change plugin, this only gave headache, srsr

Answer 1

From what I see analyzing the DOM of the page whose link provided in the question, your problem is in the CSS styles for the elements within each li of your slider.

Here is a list of changes to "normalize" the way you are manipulating the elements so that in the various browsers you can achieve the same visual aspect:

1. The element involving the content

   In the element div that surrounds the content, in addition to defining the width and height of it, you should indicate that the elements within it are all relative to it:

   .slide {
       height: 541px;
       width: 912px;
       position: relative;
   }
   

2. The elements that divide the presentation

   You have two elements div who try to arrange the text to the left side and the image to the right side. These elements must be occupying a certain space effectively without allowing mixtures between them:

   /* Definições para ambas as DIV (nova declaração) */
   .bxslider li .slide > div {
       position:absolute;
       top:80px;
       bottom:40px;
   }
   
   /* Definições para a DIV do texto */
   .slide_txt {
       left: 60px;
       color: #FFF;
       font-family: Helvetica-nw;
       font-size: 16px;
       text-align: left;
       width: 320px;
   }
   
   /* Definições para a DIV da imagem */
   .slide_img {
       right: 50px;
       width: 460px;
   }
   

   This way you have the elements in an absolute position in relation to their surrounding element which is the div with the CSS class slide.

3. The image

   Your image should stay inside the element that surrounds it in a controlled way, particularly due to IE8:

   .slide_img img {
       position: relative; /* relative e não absolute */
       top: 25%;
       width:100%;
   }
   

4. Slider Background / Frame Color

   Your borders are white in Internet Explorer 8 because it does not recognize any statement made and ends up applying:

   background: none transparent scroll repeat 0% 0%
   

   Where have you:

   #slider {
       background: #1d1d1d;
       background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFkMWQxZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYlIiBzdG9wLWNvbG9yPSIjMjIyMjIyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFlMWUxZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
       background: -moz-linear-gradient(top,  #1d1d1d 0%, #222222 6%, #1e1e1e 100%);
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1d1d1d), color-stop(6%,#222222), color-stop(100%,#1e1e1e));
       background: -webkit-linear-gradient(top,  #1d1d1d 0%,#222222 6%,#1e1e1e 100%);
       background: -o-linear-gradient(top,  #1d1d1d 0%,#222222 6%,#1e1e1e 100%);
       background: -ms-linear-gradient(top,  #1d1d1d 0%,#222222 6%,#1e1e1e 100%);
       background: linear-gradient(to bottom,  #1d1d1d 0%,#222222 6%,#1e1e1e 100%);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d1d1d', endColorstr='#1e1e1e',GradientType=0 );
   
   }
   

   Should be:

   #slider {
       background-color: #1d1d1d;
   }
   

   All effects are imperceptible given the little space to present them and if they want compatibility and coherence with old browsers, assigns a background color and gives the subject dismissed.

Upshot

As you can see from the screenshot below, if you make the changes I indicated by removing the styles I did not mention and applying those referred to in this answer in each of the elements indicated, You’ll get the subject sorted out for Internet Explorer 8!

^{Note: Full-size image, right-click on it and choose to open it on your own so you can view it properly.}

Observation of navigation arrows

Navigation arrows are exactly 30 pixels apart from other browsers.

If after the changes the only thing that is out of place are the arrows, warns that it also gives a fix to this.

Answer 2

Well, I always use cycle2. It has always worked from IE7 to IE11 and in the browsers Opera, Safari, Chrome and Firefox... it is only with those that I work and promise to deliver the site running the same at all...

http://jquery.malsup.com/cycle2/demo/carousel.php

for those who do not know Cycle proposes to be a universal-browser slideshow, ie to work in any browser...