ThetaProject

ThetaProject supports this item

Supported

This author's response time can be up to 5 business days.

129 comments found.

Hi, I just bought this carousel and is using it with Bootstrap 4. When I place the carousel inside a bootstrap container->row->col system, the carousel will not show up unless I force the carousel to be style=”position:absolute;”. And when it does show up, the carousel is very tiny.

Is there a conflict with using this in a Bootstrap framework?

Hi

Could you please try this layout:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Theta Carousel Example bezier1</title> <script src="scripts/jquery-2.1.4.min.js"></script> <script src="scripts/theta-carousel.min.js"></script> <script src="scripts/example.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> </head> <body style="background: #66cdcc;"> <div class="container"> <div class="row"> <div class="col-lg"> <div id="container" style="height:500px"> <style type="text/css"> img { vertical-align: middle; } .ex-item { height: 356px; width: 270px; display: none; border: 5px solid white; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } </style> <div class="ex-item"> <img src="Images/1.jpg" /> </div> ................ </div> </div> </div> </div> </body> </html>

Regards,

height attribute is required for the carousel container

<div id=”container” style=”height:500px”>

That did it. Thank you. Was missing the height requirement.

Please email me asap – I need some help

What exactly do you need? Some help with component integration?

Hello, can you confirm that your script is compatible with jQuery 3 ?

Hello,

Because of this issue

It is not compatible with jQuery versions:

3.0.0

3.1.0

3.1.1

The issue was fixed in 3.2.0. Since then there are no known incompatibilities.

Compatible with:

3.2.0

3.3.0

3.3.1

Regards,

Hello. First of all, thank you for great script.

I need some help with it. Look please on the gallery at this page http://markup-examples.brain-house.com/theta-carousel/ . Purple overlay on slides is changed in wrong way. It must be changed before a slide takes a new position. Accordion to your API this problem can be changed by motionStart event. But in that way how to get correct index of the central slide? Both data.index and selectedIndex option show previous item index. If necessary, I can send the code.

Thank for your help and best regards

Hello

I’m on vacation now, and have very limited access to the internet. Will get back to you on Monday.

Regards

Hello,

Carousel updates the index at the end of transition. Also there is no way to say what is the direction of the transition and what is the percentage of completion. So you can not apply custom overlay gradually during the transition. Especially taking into account that some transitions might scroll throughout more than one element (depending on what user did – tap, swipe, click on next/prev).

If you want to make your back items a little bit foggy with the overly, you can try “Fade Away” effect – it makes the elements a bit transparent

2018_04_30_1235

Unfortunately, fogging items without transparency is not possible at the moment.

Regards,

Ok, thank you for your answer

Hello,

When i use the slider on mobile, it prevents scrolling the page content. Is it possible to distinguish the vertical swipe to scroll page content and the horizontal swipe to scroll slider content.

Hello,

No, carousel cannot distinguish vertical and horizontal swipes. Carousel uses event.preventDefault() method to stop further event propagation to page. Without this, your page and carousel may scroll simultaniously, which is alos not good.

I created a custom build for you where further propagation is allowed. See your private messages. If you have only verticall scroll on the page, and caroulel is horisontal, you’ll get the effect you need.

Regards,

Actually there is no way to send a private message to you, maybe because you are not an author. try to send private message to me, and I’ll reply with custom build of the carousel.

Greetings, ThetaProject. Your carousel is beautiful, and due to it’s impressive visuals and high degree of configurability, it was selected for a project I’m currently on, and purchased by my employer ( I can PM you purchaser information if needed).

However, we’ve discovered a small flaw. Somewhere in the code, both during start-up and on frame transitions, something it is doing is very CPU intensive. The Raspberry Pi that we’re using is more than up to the task of complex 3D rendering. However, this plugin specifically is dog slow. To verify that it was Theta-Carousel being slow and not simply my code around it, I have gone to your site from a raspberry pi using the chromium-browser to verify that the examples are also slow.

Is there any chance you can do a little profiling on theta carousel and hopefully speed it up a little bit?

Hello,

We already did few rounds of optimization. Usually the slowest part is 3D rendering itself, especially when you have big images, and many simultaneously visible elements. Even if they looks small and appears far behind the main one, browser still needs resources to prepare 3D view.

So, I would try to reduce images size (of course if it is possinble) and see if it helps. If it doesn’t, the next step can be carousel reconfiguration to reduce amount of elements that are simultaneously visible (try numberOfElementsToDisplayRight, and numberOfElementsToDisplayLeft settings).

Could you try this example on the Raspberry Pi: http://theta-carousel.com/carousel-example.html 9 small images, I think it should be smooth.

What are the size of your images? What configuration parameters do you use? How many elements do you have?

Regards,

Hi there,

What’s the best way to hide/show or add/remove items from the theta-carousel.

I’m an expert JS dev, and I’ve looked through your jquery plugin, but it doesn’t look like you built methods for dynamically changing the content.

Hi,

Basically it’s enough to add an item to .carousel-container (not theta-carousel-inner-container ) or remove existing ones from .theta-carousel-inner-container and call update method afterwards.

Regards,

Example code. The second time it’s called, it breaks.

function openCarousel() {
if (!_) _ = {};
if (!_.itemHTML) _.itemHTML = {};
// no item selected yet?
if (!currentItemDP) return;
// pre-render content, once per item
if (!_.itemHTML[currentItemDP])
  _.itemHTML[currentItemDP] = makeImagesHTML(currentItemDP);
// OVERWRITE HTML ON PAGE
.$detailsCarousel.html(.itemHTML[currentItemDP]);
// fade in effect
_.$detailsCarousel.css({
  opacity: 0
}).delay(500).animate({
  opacity: 1
}, 500);
// already initialize, request update???? <<<< ISSUE IS THIS
if (_.g.carouselInitialized) {
  _.$detailsCarousel.theta_carousel('update');
  _.$detailsCarousel.theta_carousel('invalidate');
  return;
}
// initialize once
if (!_.g.carouselInitialized) {
  _.g.carouselInitialized = true;
}
_.$detailsCarousel.theta_carousel({
  "filter": ".ex-item",
  "selectedIndex": 20,
  "numberOfElementsToDisplayRight": 9,
  "designedForWidth": 1600,
  "designedForHeight": 705,
  "scaleX": 1.79,
  "scaleY": 1.17,
  "distanceInFallbackMode": 370,
  "path": {
    "settings": {
      "shiftX": 3,
      "shiftY": 251,
      "shiftZ": -333,
      "pathLength": 1396,
      "width": 1078,
      "height": 500,
      "depth": 10,
      "xyPathBezierPoints": {
        "p1": {
          "x": -100,
          "y": 0
        },
        "p2": {
          "x": 0,
          "y": 100
        },
        "p3": {
          "x": 0,
          "y": -100
        },
        "p4": {
          "x": 100,
          "y": 0
        }
      },
      "xyArcLengthBezierPoints": {
        "p1": {
          "x": 0,
          "y": 0
        },
        "p2": {
          "x": 100,
          "y": 0
        },
        "p3": {
          "x": 0,
          "y": 100
        },
        "p4": {
          "x": 100,
          "y": 100
        }
      },
      "xzPathBezierPoints": {
        "p1": {
          "x": -100,
          "y": 50
        },
        "p2": {
          "x": 0,
          "y": 0
        },
        "p3": {
          "x": 0,
          "y": 0
        },
        "p4": {
          "x": 100,
          "y": 50
        }
      }
    },
    "type": "cubic_bezier" 
  },
  "sensitivity": 0.4,
  "shadow": true,
  "fadeAway": true,
  "fadeAwayNumberOfConfigurableElements": 10,
  "fadeAwayBezierPoints": {
    "p1": {
      "x": 0,
      "y": 100
    },
    "p2": {
      "x": 100,
      "y": 100
    },
    "p3": {
      "x": 100,
      "y": 100
    },
    "p4": {
      "x": 100,
      "y": 0
    }
  },
  "sizeAdjustment": true,
  "sizeAdjustmentNumberOfConfigurableElements": 9,
  "sizeAdjustmentBezierPoints": {
    "p1": {
      "x": 0,
      "y": 100
    },
    "p2": {
      "x": 0,
      "y": 50
    },
    "p3": {
      "x": 10,
      "y": 40
    },
    "p4": {
      "x": 100,
      "y": 15
    }
  }
});
}
function makeImagesHTML(dp) {
  var imgsThumb = "";
  $.each(lumeneoContent.portfolio[dp].images, function(index, value) {
    if (value.url) {
      imgsThumb += ' ' +
        '' +
        ' ';
    }
  });
  return imgsThumb;
}

Do you have it online somewhere? it’s hard to say what is broken here without having all the code.

But at least I think you don’t need to check if carousel is already initialized or not. It is jQuery plugin, and jQuery will take care about plugin initializing when you accessing it first time.

Whatever, I see your refund request. It looks like you posted the question and refund request simultaneously. Usually it’s better to discuss your concerns first. But sure, there is no problem, I’ll approve the refund.

Regards,

dloop

dloop Purchased

Configurator error, boot.js blocked because of https//.

It looks like jQuery UI 1.11 (we use it in configurator ) is not compatible with jQuery 3.3.1. I’ll fix it, but it requires some time.

Meanwhile you can switch to jQuery 2.1.4 to configure the carousel. After configuration is done, you can switch back to 3.3.1 – carousel itself is compatible with this version of jQuery.

dloop

dloop Purchased

Nicely done, friend!

Happy that you like it. 5* would be appreciated ;)

by
by
by
by
by
by