Home/ Questions/Q 954579
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T00:14:19+00:00

I’m trying to create a carousel similar to http://www.aprica.jp/ , using jQuery and HTML.

  • 0

I’m trying to create a carousel similar to http://www.aprica.jp/, using jQuery and HTML. To do so, I need to be able to horizontally center the contents of a large (overflow-hidden) div to the viewport. Any ideas how I can do that?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok Buzz, if i understand you need a way to center a div inside another ‘overflow: hidden’ div.
    I imagine you don’t know in advance the width of the inner div. You sead you want to use JQuery than ou have to calculate the left margin of the inner div with something like this:

    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>item List</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>
    <script type="text/javascript">
      <!--
        $(document).ready(function (){
            $('#div2').draggable();
            var halfScreen = $('#div2').parent().width()/2;
            var left = ($('#div2').width()/2)-halfScreen;
            $('#div2').css("left", (-left)+"px");
        });
      //-->
    </script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #div1{
            width: 100%;
            height: 300px;
            margin: 80px 0;
            padding: 0;
            background: red;
            overflow: hidden;
        }
        #div2{
            width: 300%;
            height: 100px;
            margin: 100px 0;
            padding: 0;
            background: #ddd;
        }
        #div3{
            width: 50%;
            height: 100px;
            margin: 0;
            padding: 0;
            background: #aaa;
        }
    </style>
</head>

<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</body>

</html>

    This is a very simple case, if you need more, please ask.

    PS: you need JQuery and JQuery.UI.

    • 0